Laravel Mix编译React应用卡在92%，构建速度极慢求助

问题描述 #

使用Laravel Mix ^6.0.49编译React应用，执行npm run production命令进行生产模式构建时，进度卡在92%，耗时达50秒甚至更久。相关配置代码如下：

mix.setPublicPath('../public')
 .js('resources/js/management/management.js', 'js')
 .js('resources/js/pusher.js', 'js')

 .js('resources/js/ecommerce/ecommerce.js', 'js')
 .js('resources/js/cipol/cipol.js', 'js')
 .js('resources/js/common/map.js', 'js')
 .js('resources/js/common/cart.js', 'js')
 .js('resources/js/common/cartbutton.js', 'js')
 .js('resources/js/common/cartmodal.js', 'js')

 .js('resources/js/common/trending.js', 'js')
 .js('resources/js/common/editorcomponent.js', 'js').
 options({
    processCssUrls: false,
    autoprefixer: false

 })
 .react();

 mix.webpackConfig({
  output: {
    chunkFilename:(pathData) => {
        return '/management.cipol.net/js/chunks/[name]2.js';
    }
 },

resolve: {
    fallback: { // not present by default
        "crypto": false,
        "stream": false,
        "fs": false,
        "@fortawesome/fontawesome-svg-core":false,
        "@fortawesome/free-solid-svg-icons":false,
        "@fortawesome/react-fontawesome":false
    }
},
});

解决方案 #

1. 优化多入口打包，提取公共依赖

当前配置有10个独立的js()入口，Laravel Mix会重复编译每个入口的公共依赖（如React、FontAwesome），导致冗余耗时。用extract()抽离公共依赖，减少重复工作：

mix.setPublicPath('../public')
   // 将所有入口合并为一个数组，统一处理
   .js([
      'resources/js/management/management.js',
      'resources/js/pusher.js',
      'resources/js/ecommerce/ecommerce.js',
      'resources/js/cipol/cipol.js',
      'resources/js/common/map.js',
      'resources/js/common/cart.js',
      'resources/js/common/cartbutton.js',
      'resources/js/common/cartmodal.js',
      'resources/js/common/trending.js',
      'resources/js/common/editorcomponent.js'
   ], 'js')
   // 提取公共依赖到单独的vendor文件
   .extract(['react', 'react-dom', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', '@fortawesome/react-fontawesome'])
   .options({
      processCssUrls: false,
      autoprefixer: false
   })
   .react();

2. 修正Webpack Fallback配置

FontAwesome相关包是正常的npm依赖，不需要添加到fallback并设置为false，错误的配置会增加Webpack解析开销，修改为：

mix.webpackConfig({
  output: {
    chunkFilename:(pathData) => {
        return '/management.cipol.net/js/chunks/[name]2.js';
    }
 },
 resolve: {
    fallback: {
        "crypto": false,
        "stream": false,
        "fs": false
        // 移除FontAwesome相关配置
    }
},
});

3. 简化生产模式压缩配置

生产模式下的代码压缩是耗时主要环节，可通过禁用冗余操作提升速度：

mix.options({
   processCssUrls: false,
   autoprefixer: false,
   // 禁用提取注释，减少压缩步骤
   terser: {
      extractComments: false,
      terserOptions: {
         compress: {
            drop_console: true, // 可选：移除console.log，进一步减少体积和压缩时间
            drop_debugger: true
         }
      }
   }
})

4. 调整Chunk输出路径

当前chunkFilename包含域名前缀，可能导致Webpack做额外路径解析，改为相对路径：

output: {
  chunkFilename: 'js/chunks/[name]2.js'
}

5. 清理构建缓存

执行以下命令清理Laravel Mix和Webpack缓存，避免缓存文件导致的异常耗时：

npm run clear
# 或手动删除缓存目录
rm -rf node_modules/.cache/webpack

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