sass-loader 在 webpack 中很慢答案

【问题标题】：sass-loader is slow in webpacksass-loader 在 webpack 中很慢
【发布时间】：2025-12-26 21:45:06
【问题描述】：

我有一个小项目（大约 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

【问题讨论】：

我会首先确定确实是 css-loader 通过使用 npmjs.com/package/speed-measure-webpack-plugin 来减慢速度然后，可能使用 include 选项将加载程序仅应用于需要它的文件webpack.js.org/guides/build-performance/#loaders
@Mathieu SMP 的输出包含，与 include 相同
经过一番调查后，似乎sass-loader 的性能缓慢是一个反复出现的问题，正如在此处看到的类似问题*.com/questions/56262137/… 您可能会尝试缓存加载程序github.com/webpack-contrib/cache-loader 或这个替代加载器github.com/yibn2008/fast-sass-loader'

标签： webpack sass

【解决方案1】：

安装 fiber 包以提高 sass-loader 速度

npm install fibers -D

我的初始构建时间约为 20 秒。但是，在安装了 Fiber 包以支持异步编译后，它下降到了大约 9 秒。

【讨论】：

【解决方案2】：

我在使用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/"),
          ]
        }
      }
    },
  ],
}

【讨论】：