Laravel Mix多输出文件场景下如何加快Sass编译速度及实现增量编译

你提到的仅编译修改过文件的增量编译需求完全可以实现，配合以下优化可以把二次编译时间压缩到3秒以内：

1. 开启持久化缓存实现增量编译 #

Laravel Mix底层基于Webpack，开启文件系统缓存后只会重新编译有改动的文件，是性能提升幅度最大的优化。在webpack.mix.js中添加如下配置：

mix.webpackConfig({
  cache: {
    type: 'filesystem',
    // 缓存默认存储在node_modules/.cache/webpack，无需额外配置
  }
})

// 同时开启Babel缓存，减少JS编译开销
mix.babelConfig({
  cacheDirectory: true
})

注意：首次编译时依然会全量执行，耗时和之前接近，后续修改单个文件时仅会处理对应改动，编译耗时会从40秒降到1-3秒区间。

2. 拆分不变的第三方依赖 #

使用Mix内置的extract()方法将Vue、Lodash等不会频繁变动的第三方依赖单独打包，避免每次编译都重复处理这些资源：

// 提取所有node_modules中的依赖到单独的vendor文件
mix.extract()

如果你的SCSS引入了大量第三方样式库，也可以单独将全局公共样式、第三方库样式打包为独立的common.css，无需每个块的SCSS都重复引入解析。

3. 开发环境禁用高开销配置 #

开发环境关闭生产阶段才需要的优化项，减少不必要的计算：

• 改用低开销的SourceMap：mix.sourceMaps(false, 'eval-cheap-module-source-map')，比默认全量SourceMap编译速度提升30%以上
• 开发阶段禁用代码压缩、PurgeCSS、样式自动前缀补全（生产环境再开启）
• 全局注入SCSS公共变量、Mixin，避免每个块文件重复引入：

  mix.sass('resources/sass/app.scss', 'public/css', {
    sassOptions: {
      additionalData: `@import "resources/sass/_variables.scss"; @import "resources/sass/_mixins.scss";`
    }
  })
  

4. 多进程编译加速多入口处理 #

你的场景是大量独立块作为多入口，开启多进程编译可以充分利用CPU多核性能，在webpack配置中添加：

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['thread-loader']
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ['thread-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
})

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