React 项目 打包优化_react项目分析项目打包体积

一、打包体积分析

通过分析打包体积，才能知道项目中的哪部分内容体积过大，才能知道如何来优化

1. 安装分析打包体积的包：npm i source-map-explorer

2. 在 package.json 中的 scripts 标签中，添加分析打包体积的命令

   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
   }
   

3. 对项目打包：npm run build（如果已经打过包，可省略这一步）

4. 运行分析命令：npm run analyze

5. 通过浏览器打开的页面，分析图表中的包体积

二、生产环境优化

能够根据是否为生产环境对redux中间件进行优化 

store/index.js 中：

let middlewares
 
if (process.env.NODE_ENV === 'production') {
  // 生产环境，只启用 thunk 中间件
  middlewares = applyMiddleware(thunk)
} else {
  middlewares = composeWithDevTools(applyMiddleware(thunk))
}

三、路由懒加载

能够对路由进行懒加载实现代码