unipapp 解决无法编译sass_Webpack 4编译速度优化踩坑

一，目标

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

二，准备工作

当前webpack版本 4.43.0

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

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

GitHub地址：

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

npm i -D speed-measure-webpack-plugin

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

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap(webpackConfig);

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

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

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

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

三，确定方案

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

happypack和thread-loader

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

h