React+Laravel项目生产环境app.js达8MB加载慢，求打包配置优化方案

• 先分析打包产物构成，定位大体积依赖来源：
  安装webpack打包分析工具：
  npm install webpack-bundle-analyzer --save-dev
  调整webpack.mix.js配置，注入分析插件：

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  
  mix.js('resources/js/app.js', 'public/js')
    .react()
    .extract(["react"])
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
      plugins: [new BundleAnalyzerPlugin()]
    });
  

  运行生产环境打包命令npm run prod，会自动打开分析页面，可直观看到每个依赖在打包产物中的占比，精准定位冗余模块。

• 优先确认打包命令
  不要使用开发环境打包命令npm run dev/npm run watch，这类命令不会开启代码压缩、Tree Shaking逻辑，打包体积会比生产环境高3-5倍，必须使用npm run prod/npm run build执行生产环境打包。
• 完善公共依赖抽取规则
  你当前的extract配置仅抽离了react库，react-dom、各类第三方工具库、UI库等所有node_modules依赖都被打进了app.js，是体积异常的核心原因。可以直接省略extract的参数，自动将所有node_modules依赖抽离为单独的vendor.js：

  // 改前：.extract(["react"])
  // 改后：
  .extract()
  

  也可以根据业务情况手动指定需要抽离的公共依赖，避免vendor.js体积过大：

  .extract(['react', 'react-dom', 'axios', 'lodash'])
  

• 第三方依赖按需加载
  避免全量引入第三方UI库、工具库：
  • UI库（如Ant Design、MUI等）使用对应按需加载babel插件，不要全量引入完整包和样式
  • 工具库（如Lodash）不要全量引入import _ from 'lodash'，改为按需引入单个方法import { debounce } from 'lodash-es'
• 开启路由级代码分割
  用React.lazy + Suspense实现路由懒加载，不需要将所有页面代码一次性打入app.js，访问对应页面时才加载对应代码块：

  const UserPage = React.lazy(() => import('./pages/UserPage'));
  // 路由配置处用Suspense包裹
  <Suspense fallback={<div>加载中...</div>}>
    <Route path="/user" component={UserPage} />
  </Suspense>
  

• 静态资源优化
  调整资源打包阈值，避免大体积图片、字体被转成base64打入js文件，在webpack配置中调整url-loader的limit参数，超过阈值的资源单独存放到public目录加载。同时在服务器层面开启gzip/brotli压缩，可进一步降低静态资源传输体积60%以上。
• 清理无用代码
  开启Tree Shaking清理未被调用的代码，确保babel配置没有将ES6模块转为CommonJS规范（会导致Tree Shaking失效），运行npm prune清理项目中未被使用的node_modules依赖。

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