webpack - sass-loader 在 webpack 中运行缓慢

Question

我有一个小项目(大约 30 个 sass 文件)，在 sass我正在使用 @import和 @mixin ...

我的 webpack 开发构建大约需要 30s (而且还在增长，上周是 20 多岁)，这太疯狂了……

我的配置是:

        {
          test: /\.scss$/,
          exclude: /(node_modules|bower_components)/,
          use: [
            {
              loader: "css-loader",
              options: {
                modules: {
                  localIdentName: '[local]___[hash:base64:5]',
                },
                sourceMap: false,
              },
            },
            { 
              loader: 'sass-loader', 
            }
          ],
        },

我需要加快本地构建速度……我的配置有什么问题？为什么这么慢？

 SMP  ⏱  
General output time took 27.82 secs

 SMP  ⏱  Plugins
MiniCssExtractPlugin took 0.001 secs

 SMP  ⏱  Loaders
css-loader, and 
sass-loader took 27.14 secs
  module count = 68
modules with no loaders took 1.56 secs
  module count = 611
svg-sprite-loader took 0.204 secs
  module count = 1

Answer 1

我在 sass-loader 上遇到了同样的问题并尝试了一些解决方案，但最好的解决方案是使用 cache-loader
现在我的构建时间从 27 秒减少到 10 秒
前

后

安装:npm i -D cache-loader用法:

{
  test: /\.(sa|sc|c)ss$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: "../",
        hmr: hotMode,
        reloadAll: true,
      },
    },
    // do not insert cache-loader above the extract css loader, it may cause issues
    "cache-loader", // <--------
    "css-loader?url=false",
    "postcss-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          hmr: true,
          modules: true,
          includePaths: [
            path.join(__dir, "/views/scss/theme/"),
          ]
        }
      }
    },
  ],
}