React项目打包 优化详解

项目打包和优化-项目打包

目标：能够通过命令对项目进行打包

步骤：

1. 在项目根目录打开终端，输入打包命令：npm run build

2. 等待打包完成，打包后的内容被放在项目根下的 build 文件夹中

项目打包和优化-项目本地预览

目标：能够在本地预览打包后的项目

步骤：

1. 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务

2. 在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器

3. 在浏览器中访问：http://localhost:5000/ 预览项目

项目打包和优化-打包体积分析

目标：能够分析项目打包体积

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

步骤：

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(thu