Webpack 4编译速度优化踩坑 - 言先生

Webpack 4编译速度优化踩坑

一，目标

今天打算做一些webpack打包编译的速度优化。

二，准备工作

当前webpack版本 4.43.0

首先，既然是做速度优化，就得先知道当前的编译速度是多少。

推荐这个插件：speed-measure-webpack-plugin

GitHub地址：

https://github.com/stephencookdev/speed-measure-webpack-plugingithub.com/stephencookdev/speed-measure-webpack-plugin

npm i -D speed-measure-webpack-plugin

用法也很简单，官方文档里也有

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap(webpackConfig);

然后我们再运行一下build命令

添加图片注释，不超过 140 字（可选）

终端里会出现上面这张图，还是蛮清晰的，每个模块的编译时间，包括plugin的执行时间，都会有，报红的时间都是超过10s的

（补充：这里的modules with no loaders实际上就是无需编译浏览器可识别的js）

OK，既然已经有了时间了，那我开始优化了。

三，确定方案

Google了一下，目前有两种主流方案：

happypack和thread-loader

先来看一下happypack，这里是GitHub地址

看了官方文档后，果断放弃，为什么？

添加图片注释，不超过 140 字（可选）

噗呲，作者都推荐了thread-loader了，那我还有啥好说的，直接上链接：

npm install --save-dev thread-loader

按照文档一通配置，我先来针对eslint-loader试一下效果

{ enforce: 'pre', test: /\.(js|jsx)$/, exclude: [ /node_modules/ ], include: [ path.resolve(__dirname, '../src') ], use: [ { loader: "thread-loader" }, { loader: 'eslint-loader' } ] },

其实就是放到需要优化的loader之前

再次执行

添加图片注释，不超过 140 字（可选）

这。。。。。。

重新加一些参数

{ enforce: 'pre', test: /\.(js|jsx)$/, exclude: [ /node_modules/ ], include: [ path.resolve(__dirname, '../src') ], use: [ { loader: "thread-loader", options: { workerParallelJobs: 50, poolParallelJobs: 50 } }, { loader: 'eslint-loader' } ] },

再次执行

添加图片注释，不超过 140 字（可选）

好像相比上次好了一点点，但是竟然还是没有去掉的时候速度快。

不过确实webpack编译时间每次都不一样，所以要多编译几次，然后看大致的平均时间：

我经过多次编译对比之后发现，好像确实是不添加的快。。

添加图片注释，不超过 140 字（可选）

看到官方的这条提示，我明白了，原来真的不是所有的loader加了这个都会变快的，有的真的甚至会变慢，所以还是需要亲自编译观察对比才行。

接着我来试一下sass-loader部分：

{ test: /\.(scss|css)$/, use: [ { loader: "thread-loader", options: { workerParallelJobs: 50, poolParallelJobs: 50 } }, { loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader', options: { sourceMap: false, modules: { localIdentName: config.defaultLocalIdentName } } }, { loader: 'postcss-loader' }, { loader: 'sass-loader' } ] },

老样子，将这个thread-loader放到所有的样式loader的最前面，再次编译