perf: react profile

Author: MuYunyun

.eslintrc

@@ -26,5 +26,6 @@
  "import/no-unresolved": 0,
  "import/no-extraneous-dependencies": 0,
  "no-plusplus": 0,
+ "no-param-reassign": 0,
  }
 }

README.md

@@ -33,7 +33,7 @@ yarn deploy || npm run deploy
 - [x] 打包构建: Babel Webpack(4.x)
 - [x] 热更新: webpack-server 赋能
 - [x] 包管理: Yarn || Npm
-- [x] UI 库: React & React-Dom(16.4.0)
+- [x] UI 库: React & React-Dom(16.5.x)
 - [x] UI 组件: Antd(3.x)
 - [x] 路由: react-router(4.x)、react-router-redux
 - [x] JS: ES6、ES7
@@ -42,16 +42,14 @@ yarn deploy || npm run deploy
 - [x] Ajax: Fetch
 - [x] 跨域: 基于 CORS 实现
 - [x] 代码校验: Eslint(Airbnb)
-- [ ] [css 模块化](https://github.com/MuYunyun/reactSPA/issues/52)
-- [ ] [网关](https://github.com/MuYunyun/gateway): 一个 IOC 的简单 demo，有时间填坑
+- [ ] [网关](https://github.com/MuYunyun/gateway): ioc 模式，有时间填坑
 
 ### Optimize
 
 * [压缩打包优化](https://github.com/MuYunyun/reactSPA/issues/53)
+* [css 模块化](https://github.com/MuYunyun/reactSPA/issues/52)
 
-### Document
-
-提到过该项目的文章，未来会迭代。
+### Articles
 
 * [使用 React 全家桶搭建一个后台管理系统](http://muyunyun.cn/posts/9bfbdbf4/)
 * [redux middleware 源码分析](http://muyunyun.cn/posts/7f9a92dc/)

config/env.js

@@ -13,7 +13,7 @@ if (!NODE_ENV) {
 }
 
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-var dotenvFiles = [
+const dotenvFiles = [
  `${paths.dotenv}.${NODE_ENV}.local`,
  `${paths.dotenv}.${NODE_ENV}`,
  // Don't include `.env.local` for `test` environment
@@ -51,32 +51,19 @@ process.env.NODE_PATH = (process.env.NODE_PATH || '')
  .map(folder => path.resolve(appDirectory, folder))
  .join(path.delimiter)
 
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in Webpack configuration.
-const REACT_APP = /^REACT_APP_/i
-
 // 获取客户端环境
-function getClientEnvironment(publicUrl) {
- const raw = Object.keys(process.env)
- .filter(key => REACT_APP.test(key))
- .reduce(
- (env, key) => {
- env[key] = process.env[key]
- return env
- },
- {
- NODE_ENV: process.env.NODE_ENV || 'development',
- PUBLIC_URL: publicUrl,
- }
- )
- // Stringify all values so we can feed into Webpack DefinePlugin
+function getClientEnvironment() {
+ const raw = {
+ NODE_ENV: process.env.NODE_ENV || 'development',
+ // PUBLIC_URL: publicUrl,
+ }
+
  const stringified = {
  'process.env': Object.keys(raw).reduce((env, key) => {
  env[key] = JSON.stringify(raw[key])
  return env
  }, {}),
  }
-
  return { raw, stringified }
 }
 

config/webpack.config.dev.js

@@ -3,11 +3,9 @@ const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
-// const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
-// const eslintFormatter = require('react-dev-utils/eslintFormatter')
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
-const getClientEnvironment = require('./env')
 const AnalyzeWebpackPlugin = require('analyze-webpack-plugin').default
+const getClientEnvironment = require('./env')
 const paths = require('./paths')
 
 const publicPath = '/'
@@ -60,22 +58,6 @@ module.exports = {
  module: { // https://doc.webpack-china.org/configuration/module/
  strictExportPresence: true,
  rules: [
- // 在 babel 解析前进行 eslint 校验
- // {
- // test: /\.(js|jsx)$/,
- // enforce: 'pre',
- // use: [
- // {
- // options: {
- // formatter: eslintFormatter,
- // eslintPath: require.resolve('eslint'),
-
- // },
- // loader: require.resolve('eslint-loader'),
- // },
- // ],
- // include: paths.appSrc,
- // },
  {
  // 使用第一个规则匹配
  oneOf: [
@@ -189,13 +171,13 @@ module.exports = {
  // 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境。作用没理解~
  // new webpack.NamedModulesPlugin(),
  // 区别开发模式和发布模式的全局变量
- new webpack.DefinePlugin(env.stringified),
+ new webpack.DefinePlugin(Object.assign({}, env.stringified, {
+ ENABLE_DEVTOOLS: true,
+ })),
  // This is necessary to emit hot updates (currently CSS only):
  new webpack.HotModuleReplacementPlugin(),
  // 防止大小写错误
  new CaseSensitivePathsPlugin(),
- // 在 npm install 新的依赖后自动刷新
- // new WatchMissingNodeModulesPlugin(paths.appNodeModules),
  // 优化 moment.js 库的体积，https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  new AnalyzeWebpackPlugin(), // 输入 http://localhost:3000/analyze.html 查看相应信息，从而进行优化

config/webpack.config.prod.js

@@ -4,7 +4,6 @@ const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
-// const eslintFormatter = require('react-dev-utils/eslintFormatter')
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const paths = require('./paths')
@@ -21,9 +20,6 @@ const env = getClientEnvironment(publicUrl)
 if (env.stringified['process.env'].NODE_ENV !== '"production"') {
  throw new Error('Production builds must have NODE_ENV=production.')
 }
-
-// const cssFilename = 'static/css/[name].[contenthash:8].css'
-
 // 优先体积
 module.exports = {
  mode: 'production',
@@ -67,21 +63,6 @@ module.exports = {
  module: {
  strictExportPresence: true,
  rules: [
- // {
- // test: /\.(js|jsx)$/,
- // enforce: 'pre',
- // use: [
- // {
- // options: {
- // formatter: eslintFormatter,
- // eslintPath: require.resolve('eslint'),
-
- // },
- // loader: require.resolve('eslint-loader'),
- // },
- // ],
- // include: paths.appSrc,
- // },
  {
  oneOf: [
  {
@@ -180,27 +161,6 @@ module.exports = {
  },
  ],
  },
- // optimization: {
- // cacheGroups: {
- // vendor1: {
- // chunks: 'all',
- // test: /[\\/]node_modules[\\/](react|react-dom|antd)[\\/]/,
- // name: 'vendor1',
- // maxAsyncRequests: 5,
- // priority: 10,
- // enforce: true,
- // },
- // vendor2: {
- // chunks: 'all',
- // test: /[\\/]node_modules[\\/]/,
- // name: 'vendor2',
- // maxAsyncRequests: 5,
- // priority: 9,
- // enforce: true,
- // reuseExistingChunk: true,
- // },
- // },
- // },
  plugins: [
  new HtmlWebpackPlugin({
  inject: true,
@@ -218,7 +178,9 @@ module.exports = {
  minifyURLs: true,
  },
  }),
- new webpack.DefinePlugin(env.stringified),
+ new webpack.DefinePlugin(Object.assign({}, env.stringified, {
+ ENABLE_DEVTOOLS: false,
+ })),
  // Generate a manifest file which contains a mapping of all asset filenames
  // to their corresponding output file so that tools can pick it up without
  // having to parse `index.html`.
@@ -239,7 +201,6 @@ module.exports = {
  if (message.indexOf('Skipping static resource') === 0) {
  return
  }
- console.log(message)
  },
  minify: true,
  // For unknown URLs, fallback to the index page

package.json

@@ -17,7 +17,7 @@
  },
  "homepage": "http://muyunyun.cn/reactSPA/",
  "dependencies": {
- "antd": "^3.2.1",
+ "antd": "^3.9.3",
  "babel-plugin-on-demand-loading": "^0.0.9",
  "diana": "0.5.1",
  "draftjs-to-html": "^0.7.2",
@@ -30,8 +30,8 @@
  "moment": "^2.18.1",
  "photoswipe": "^4.1.2",
  "prop-types": "^15.6.2",
- "react": "^16.4.2",
- "react-dom": "^16.4.2",
+ "react": "^16.5.2",
+ "react-dom": "^16.5.2",
  "react-draft-wysiwyg": "^1.10.0",
  "react-loadable": "^5.5.0",
  "react-redux": "^5.0.5",
@@ -90,7 +90,7 @@
  "style-loader": "0.18.2",
  "sw-precache-webpack-plugin": "0.11.5",
  "url-loader": "0.5.9",
- "webpack": "^4.20.0",
+ "webpack": "^4.20.2",
  "webpack-cli": "^2.0.6",
  "webpack-dev-server": "^3.0.0-beta.1",
  "webpack-manifest-plugin": "2.0.0-rc.2",

src/client/index.js

@@ -12,12 +12,13 @@ const history = createHistory()
 
 const store = configureStore()
 
+/* eslint-disable */
 ReactDOM.render(
  <Provider store={store}>
  <ConnectedRouter history={history}>
  <div>
  { routes }
- {process.env.NODE_ENV === 'development' ? <DevTools /> : ''}
+ {ENABLE_DEVTOOLS ? <DevTools /> : ''}
  </div>
  </ConnectedRouter>
  </Provider>,

src/common/pages/home/accessNum/index.js

@@ -5,19 +5,17 @@ import {
 import EchartsViews from './EchartsViews'
 
 const AccessNum = () => (
- <div>
- <Col span={8}>
- <div className="cloud-box">
- <Card>
- <div className="pb-m">
- <h3>访问量统计</h3>
- <small>最近7天用户访问量</small>
- </div>
- <span className="card-tool"><Icon type="sync" /></span>
- <EchartsViews />
- </Card>
- </div>
- </Col>
- </div>)
+ <Col span={8}>
+ <div className="cloud-box">
+ <Card>
+ <div className="pb-m">
+ <h3>访问量统计</h3>
+ <small>最近7天用户访问量</small>
+ </div>
+ <span className="card-tool"><Icon type="sync" /></span>
+ <EchartsViews />
+ </Card>
+ </div>
+ </Col>)
 
 export default AccessNum

src/common/pages/home/buildSiteLog/index.js

@@ -4,30 +4,28 @@ import {
 } from 'antd'
 
 const BuildSiteLog = () => (
- <div>
- <Col span={8}>
- <div className="cloud-box">
- <Card>
- <div className="pb-m">
- <h3>建站日志</h3>
- <small>2个待完成，1个正在进行中</small>
- </div>
- <span className="card-tool"><Icon type="sync" /></span>
- <Timeline>
- <Timeline.Item color="#108ee9">
- <p>更多模块开发中</p>
- </Timeline.Item>
- <Timeline.Item color="red">
- <p>使用ts重构(正在开发)</p>
- </Timeline.Item>
- <Timeline.Item color="green">封装Ajax实现跨域请求</Timeline.Item>
- <Timeline.Item color="green">引人Redux,Fetch</Timeline.Item>
- <Timeline.Item color="green">引人Less,React-Router(4.x)</Timeline.Item>
- <Timeline.Item color="green">初始化项目</Timeline.Item>
- </Timeline>
- </Card>
- </div>
- </Col>
- </div>)
+ <Col span={8}>
+ <div className="cloud-box">
+ <Card>
+ <div className="pb-m">
+ <h3>建站日志</h3>
+ <small>2个待完成，1个正在进行中</small>
+ </div>
+ <span className="card-tool"><Icon type="sync" /></span>
+ <Timeline>
+ <Timeline.Item color="#108ee9">
+ <p>更多模块开发中</p>
+ </Timeline.Item>
+ <Timeline.Item color="red">
+ <p>使用ts重构</p>
+ </Timeline.Item>
+ <Timeline.Item color="green">模块化探索</Timeline.Item>
+ <Timeline.Item color="green">封装Ajax实现跨域请求</Timeline.Item>
+ <Timeline.Item color="green">引人Redux,Fetch</Timeline.Item>
+ <Timeline.Item color="green">引人Less,React-Router(4.x)</Timeline.Item>
+ </Timeline>
+ </Card>
+ </div>
+ </Col>)
 
 export default BuildSiteLog

src/common/pages/home/index.js

@@ -9,11 +9,15 @@ import './index.less'
 
 const Index = () => (
  <Row gutter={16}>
- <LeftTop />
- <ProFinish />
- <BuildSiteLog />
- <MsgBanner />
- <AccessNum />
+ <div style={{ overflow: 'hidden' }}>
+ <LeftTop />
+ <ProFinish />
+ </div>
+ <div>
+ <BuildSiteLog />
+ <MsgBanner />
+ <AccessNum />
+ </div>
  </Row>
 )