webpack编译速度过慢的一次优化 从 127s 到 10s

Intro

自己搭建了react开发环境，一步一步新增配置，测试代码运行。
在做完了“集成AntDesign组件库”这一步之后，编译速度变得很慢。
于是查找了好多优化webpack编译速度的方案。

优化点

很多个点(的配置)都会有影响。
以下列表中，禁用sourceMap这一条最有效(sourceMap生成花费了编译时间的80%以上)。
但没啥用，开发环境我还是得留着sourceMap方便调试
其他几条在我目前的项目(代码量还很少)中，优化效果不大。

最开始的编译时间：

• 不启用sourceMap

我之前的配置是在开发条件下启用了sourceMap，这样当控制台报错，直接定位到(未经转换过的)源代码。
如果未启用，则会定位到打包后的JS代码，这样很难判断代码错误的原因。

devtool: "source-map",	// 启用sourceMap

devtool: "eval",	// 禁用sourceMap

(但如果是在开发环境，很难不启用sourceMap)
devtool有很多值可选，我试了几种能展示源代码的，速度都很慢(只有直接禁用，只保留打包后的代码才最快)，
其他可选值见https://www.webpackjs.com/configuration/devtool/

优化效果：

• 关闭代码压缩 optimization.minimize

optimization: {
  minimize: true,
},

optimization: {
  minimize: false,
},

优化了1s(也有可能是机器偶然性)，效果不大。

• babel-loader指定排除文件夹exclude、指定缓存目录cacheDirectory

module: {
  rules: [
    {
      test: /\.(js|jsx)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    },
  ],
},

// 修改为：
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader?cacheDirectory=true",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    },
  ],
},

以上修改了三个地方：
- test的正则表达式规则用$限制结尾。
- 指定exclude规则(注意正则表达式别写错)
- 启用了babel-loader的cacheDirectory
详细文档见https://www.webpackjs.com/loaders/babel-loader/

优化后：

• 引入happypack插件，多进程编译

如果是大中型项目可以试试，小型项目可能还会增加打包时间(多进程切换之类的原因)。

配置改动细节见：https://gitee.com/wuyujin1997/react-env/commit/b170f76c44bb46e34a302b5e7bf994729eb81307

3% setup watch run HappyPluginHappy[happyPackLoaderForJs]: Version: 5.0.1. Threads: 4 (shared pool)
i ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from E:\coderepo\react-env
Happy[happyPackLoaderForJs]: All set; signaling webpack to proceed.

关于题目

优化点是优化点。
但在权衡利弊后，开发过程中我还是要启用sourceMap的。
于是，在其他点配置如上述，仅sourceMap依旧启用的情况下，运行时间：

所以本次优化的实际效果是：从127s到100s，接近四分之一(而不是标题中所讲的127s到10s这样大幅度的效率提升)。