sass-loader在webpack中运行缓慢

Question

我有一个小项目（大约30个SASS文件），在SASS中我使用@import和@mixin...

我的Webpack开发构建需要大约30秒的时间（而且还在增长，上周它是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

- masiyik879

---

我会先使用https://www.npmjs.com/package/speed-measure-webpack-plugin确保真正拖慢速度的是`css-loader`然后，可能使用include选项仅将您的加载程序应用于需要它的文件 https://webpack.js.org/guides/build-performance/#loaders - Mathieu

@Mathieu SMP 的输出已经包含在内了，使用 include 也是一样的。 - masiyik879

经过一番调查，似乎sass-loader的性能问题是一个经常出现的问题，就像在这里看到的类似问题 https://dev59.com/I-k5XIcBkEYKwwoY49wn。您可以尝试缓存加载器https://github.com/webpack-contrib/cache-loader或这个替代加载器https://github.com/yibn2008/fast-sass-loader。 - Mathieu

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/"),
          ]
        }
      }
    },
  ],
}

- unloco

---

因此，对于编译，您需要再次等待10秒钟 @unloco - Adarsh Raj

@AdarshRaj 在开发中，我使用vite。我只在生产构建中使用webpack。（另外，我换了一台更快的电脑，所以这不是问题） - unloco

Vite 是否更快呢 @unloco。请告诉我，这样我就可以试一下了。还请推荐其他编译器。谢谢 :) - Adarsh Raj

@AdarshRaj vite 启动更快，因为它不会编译捆绑包中的所有模块。相反，它只编译页面脚本调用的文件。Vite 的热重载也更快，因为它只重新编译已更改的文件。 - unloco

@AdarshRaj 还有Turbopack和rspack，它们承诺更快，但我还没有尝试过。 - unloco

Answer 2

我有一个非常小的原型项目，有大约两页长的styles.sass文件，我的dev构建使用eval等工具需要16秒。这太高了。

我尝试了上面的缓存加载器解决方案，但它只支持webpack 4.0，而我使用的是webpack 5.0。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: dev@0.3
npm ERR! Found: webpack@5.76.2
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.75.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from cache-loader@4.1.0
npm ERR! node_modules/cache-loader
npm ERR!   dev cache-loader@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:

然后我发现了一个fast-sass-loader的节点模块，这个模块也已经不再维护了。

就像在生活中一样，最简单的解决方案总是最好的。根本不要使用SASS。我用scss文件替换了我的sass文件，只需花费相对较少的精力，我的构建时间从16秒缩短到了7秒，而且我甚至还没有优化打包过程中的任何内容。

- Dr4gon