SCSS编译耗时过长求助：Webpack项目优化方案

从你的构建输出能明显看到，编译瓶颈完全在index.scss引入的两个大型UI框架（Materialize和Kendo Theme Material）上——每次watch模式下都要重新编译整个框架的SCSS代码，这才导致了30+秒的耗时。结合你需要保留sourcemap的需求，给你几个针对性的优化方案：

1. 按需引入框架SCSS（最有效的根源优化） #

你现在直接引入了两个框架的完整样式文件，这会让Webpack每次都编译大量未使用的组件样式，是耗时的核心原因。

• Materialize：去它的sass目录里，只引入项目实际用到的组件。比如只用了按钮、卡片和导航栏，就改成：

  // 先引入基础依赖文件
  @import '../../wwwroot/lib/materialize/sass/colors';
  @import '../../wwwroot/lib/materialize/sass/variables';
  @import '../../wwwroot/lib/materialize/sass/reset';
  // 再引入用到的组件
  @import '../../wwwroot/lib/materialize/sass/components/buttons';
  @import '../../wwwroot/lib/materialize/sass/components/cards';
  @import '../../wwwroot/lib/materialize/sass/components/navbar';
  

• Kendo Theme Material：同样支持按需引入，比如只用了Grid和Button组件，就改成：

  // 先引入基础主题文件
  @import "../../node_modules/@progress/kendo-theme-material/scss/theme";
  // 再引入用到的组件
  @import "../../node_modules/@progress/kendo-theme-material/scss/button";
  @import "../../node_modules/@progress/kendo-theme-material/scss/grid";
  

这样能直接砍掉80%以上的无用编译量，效果立竿见影。

2. 优化Webpack Loader配置，开发环境减负 #

你的当前配置里有几个拖慢速度的点，调整如下：

（1）根据环境切换CSS注入方式 #

开发环境用style-loader代替MiniCssExtractPlugin.loader——前者会把CSS直接注入到JS中，避免生成单独的CSS文件，减少IO操作；生产环境再用MiniCssExtractPlugin提取独立CSS文件。

修改webpack.config.js：

module.exports = (env, argv) => {
  const isProduction = argv.mode === "production";
  return {
    // ... 其他原有配置
    module: {
      rules: [
        {
          test: /\.s[c|a]ss$/,
          use: [
            // 按环境选择对应的loader
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader?sourceMap',
            {
              loader: 'postcss-loader?sourceMap',
              options: {
                sourceMap: 'inline',
                // 仅生产环境开启CSS压缩
                minimize: isProduction,
                config: { ctx: { env: argv.mode } }
              }
            },
            // 新增cache-loader缓存编译结果
            'cache-loader',
            {
              loader: 'sass-loader',
              options: { sourceMap: true }
            }
          ]
        },
        // ... 其他原有规则
      ]
    },
    // ... 其他原有配置
  };
};

（2）添加cache-loader缓存编译结果 #

先安装依赖：

npm install cache-loader --save-dev

它会把sass-loader编译后的结果缓存到硬盘，下次编译时如果框架的SCSS文件没有改动，就直接复用缓存，不需要重新编译，能节省大量重复编译时间。

3. 修复PostCSS配置的警告与冗余 #

你的构建输出里有PostCSS的警告，而且配置存在变量未初始化的问题，修改postcss.config.js：

module.exports = ({ options }) => {
  const plugins = {
    'postcss-property-lookup': {},
    'postcss-short': {},
    autoprefixer: {}
  };
  // 仅生产环境添加cssnano压缩插件
  if (options.env === 'production') {
    plugins.cssnano = {};
  }
  return { plugins };
};

这样既解决了警告，又避免了开发环境下不必要的CSS压缩操作。

效果预估 #

做完这些优化后，watch模式下的编译时间应该能降到5秒以内，同时完全保留sourcemap功能。优先推荐先做按需引入的优化，这是效果最显著的。

内容的提问来源于stack exchange，提问作者Lee