sass-loader 在 webpack 中很慢

Question

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

\n\n

我的 webpack 开发构建已经完成30s（并且仍在增长，上周已经是 20 多岁了），这太疯狂了......

\n\n

我的配置是：

\n\n

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

\n\n

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

\n\n

 SMP  \xe2\x8f\xb1  \nGeneral output time took 27.82 secs\n\n SMP  \xe2\x8f\xb1  Plugins\nMiniCssExtractPlugin took 0.001 secs\n\n SMP  \xe2\x8f\xb1  Loaders\ncss-loader, and \nsass-loader took 27.14 secs\n  module count = 68\nmodules with no loaders took 1.56 secs\n  module count = 611\nsvg-sprite-loader took 0.204 secs\n  module count = 1\n

\n

Answer 1

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

前

后

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