Webpack 4：SCSS重新编译耗时超3秒问题求助

我之前帮好几个开发者排查过类似的SCSS热重载卡顿问题，结合你给出的配置片段，咱们一步步拆解可能的原因和优化方案：

1. 先优化SCSS编译链的缓存与依赖结构 #

SCSS编译慢最常见的原因就是缺少编译缓存，或者依赖树过于庞大：

• 给sass-loader加上cache-loader，它会把已经编译过的SCSS结果存在本地，下次修改只重新编译变更的文件，能大幅减少重复编译时间。修改你的loader配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'cache-loader', // 新增缓存loader
            'sass-loader'
          ]
        }
      ]
    }
  };
  

• 检查你的SCSS文件是不是有大量嵌套过深的选择器，或者全局导入了几十个组件样式？这种情况下，单个文件修改会触发整个依赖树的重新编译。可以尝试把公共样式抽成单独的文件，或者用CSS Modules按组件拆分样式，减少全局依赖。

2. 移除开发环境下不必要的插件 #

你配置里的CleanWebpackPlugin和CopyWebpackPlugin可能在拖慢开发编译：

• CleanWebpackPlugin是用来清理生产环境打包目录的，webpack-dev-server是在内存中运行的，开发环境完全不需要这个插件，把它移到生产环境配置文件（比如webpack.prod.js）里就行。
• 如果CopyWebpackPlugin要复制的文件很多，每次编译都会重复复制，开发环境可以暂时注释掉，或者只复制必要的静态资源（比如字体、图标）。

3. 调整sourceMap配置 #

开发环境如果开启了完整的sourceMap（比如devtool: 'source-map'），SCSS编译生成sourceMap会额外耗时。可以改成更轻量的devtool: 'eval-cheap-module-source-map'，既能保留调试能力，又能减少编译时间。

4. 定位具体耗时环节 #

如果上面的优化还没解决问题，用webpack的 profiling 功能找出瓶颈：

• 运行开发命令时加上--profile --json参数：

  webpack serve --profile --json > stats.json
  

• 把生成的stats.json导入webpack官方的分析工具（本地运行，无需跳外链），就能看到SCSS编译阶段的具体耗时，精准定位是哪个loader或者文件拖慢了速度。

先试试前三个方案，大部分情况下SCSS热重载的速度能降到1秒以内，如果还有问题再用profiling工具深挖~

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