上述可以看到 sass-loader 的构建时间有 1.56s，占据了整个构建过程的 60%，那么有没有方法来加快 sass-loader 的构建速度呢？

可以通过多进程来实现，试想将 sass-loader 放在一个独立的 worker 池中运行，就不会阻碍其他 loader 的构建了，可以大大加快构建速度。

5.1 thread-loader

通过 thread-loader 将耗时的 loader 放在一个独立的 worker 池中运行，加快 loader 构建速度。

安装： 

  1. npm i -D thread-loader

webpack.common.js 配置方式如下：

  1. module.exports = {
  2.     rules: [
  3.         {
  4.         test: /\.module\.(scss|sass)$/,
  5.         include: paths.appSrc,
  6.         use: [
  7.           'style-loader',
  8.           {
  9.             loader: 'css-loader',
  10.             options: {
  11.               modules: true,
  12.               importLoaders: 2,
  13.             },
  14.           },
  15.           {
  16.             loader: 'postcss-loader',
  17.             options: {
  18.               postcssOptions: {
  19.                 plugins: [
  20.                   [
  21.                     'postcss-preset-env',
  22.                   ],
  23.                 ],
  24.               },
  25.             },
  26.           },
  27.           // 配置SASS多线程解析
  28.           {
  29.             loader: 'thread-loader',
  30.             options: {
  31.               workerParallelJobs: 2
  32.             }
  33.           },
  34.           'sass-loader',
  35.         ].filter(Boolean),
  36.       },
  37.     ]
  38. }

webpack 官网 提到 node-sass 中有个来自 Node.js 线程池的阻塞线程的 bug。 当使用 thread-loader 时，需要设置 workerParallelJobs: 2。

由于 thread-loader 引入后，需要 0.6s 左右的时间开启新的 node 进程，本项目代码量小，可见引入 thread-loader 后，
构建时间反而增加了0.19s。

因此，我们应该仅在非常耗时的 loader 前引入 thread-loader。

image.png

happypack ❌

happypack 同样是用来设置多线程，但是在 webpack5 就不要再使用 happypack 了，官方也已经不再维护了，推荐使用上文介绍的 thread-loader。