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

淩亂°似流年 2022-12-31 01:16 451阅读 0赞

## Intro ##

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

## 优化点 ##

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

最开始的编译时间：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]

*  不启用`sourceMap`

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

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

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

优化效果：![在这里插入图片描述][2020122712250614.png_pic_center]

*  关闭代码压缩 `optimization.minimize`

optimization: { 
      minimize: true,
    },
    
    optimization: { 
      minimize: false,
    },

![在这里插入图片描述][20201227122532694.png_pic_center]  
优化了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/][https_www.webpackjs.com_loaders_babel-loader]

优化后：![在这里插入图片描述][20201227122642999.png_pic_center]

*  引入`happypack`插件，多进程编译

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

配置改动细节见：[https://gitee.com/wuyujin1997/react-env/commit/b170f76c44bb46e34a302b5e7bf994729eb81307][https_gitee.com_wuyujin1997_react-env_commit_b170f76c44bb46e34a302b5e7bf994729eb81307]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]

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.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]

## 关于题目 ##

优化点是优化点。  
但在权衡利弊后，开发过程中我还是要启用sourceMap的。  
于是，在其他点配置如上述，仅sourceMap依旧启用的情况下，运行时间：  
![在这里插入图片描述][20201227130806993.png_pic_center]  
所以本次优化的实际效果是：从127s到100s，接近四分之一(而不是标题中所讲的127s到10s这样大幅度的效率提升)。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/40920890133a493f9385a1d13beab058.png
[https_www.webpackjs.com_configuration_devtool]: https://www.webpackjs.com/configuration/devtool/
[2020122712250614.png_pic_center]: https://img-blog.csdnimg.cn/2020122712250614.png#pic_center
[20201227122532694.png_pic_center]: https://img-blog.csdnimg.cn/20201227122532694.png#pic_center
[https_www.webpackjs.com_loaders_babel-loader]: https://www.webpackjs.com/loaders/babel-loader/
[20201227122642999.png_pic_center]: https://img-blog.csdnimg.cn/20201227122642999.png#pic_center
[https_gitee.com_wuyujin1997_react-env_commit_b170f76c44bb46e34a302b5e7bf994729eb81307]: https://gitee.com/wuyujin1997/react-env/commit/b170f76c44bb46e34a302b5e7bf994729eb81307
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201227130105972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201227130150393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70#pic_center
[20201227130806993.png_pic_center]: https://img-blog.csdnimg.cn/20201227130806993.png#pic_center