React+Webpack5代码分割后仍生成大app.js且每次加载都请求

以下是针对你遇到的问题的具体排查方向和解决方案：

1. 入口文件引入了未按需加载的代码 #

检查项目入口文件（通常是src/index.js）和根组件App.js，确认是否直接引入了本该路由懒加载的组件、大型第三方库或未使用的工具类。比如如果在App.js里直接import了所有路由页面组件，这些代码会被打包进主app.js，完全抵消路由懒加载的效果。

2. 第三方依赖未单独分包 #

Webpack5的splitChunks配置默认行为和Webpack4有差异，如果未正确配置，所有node_modules中的依赖会被合并进主包。检查你的Webpack配置中optimization.splitChunks部分，确保开启了第三方依赖的分离：

optimization: {
  splitChunks: {
    chunks: 'all', // 对所有类型的chunk生效（initial/async/all）
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: 10 // 确保优先分离第三方依赖
      }
    }
  }
}

3. Tree Shaking未生效 #

Webpack5默认开启Tree Shaking，但需要满足两个前提：

• 代码使用ES模块（而非CommonJS）：检查Babel配置，确保@babel/preset-env的modules设为false，避免将ES模块转译为CommonJS：

  module.exports = {
    presets: [
      ['@babel/preset-env', { modules: false }],
      '@babel/preset-react'
    ]
  };
  

• package.json中配置sideEffects：明确告知Webpack哪些文件有副作用（比如全局样式），避免误删有用代码，同时确保无用代码被摇除：

  "sideEffects": [
    "*.css",
    "*.scss"
  ]
  

4. 路由懒加载实现有误 #

确认React路由懒加载的写法是否正确，避免组件被提前引入：

// 正确写法：使用React.lazy动态import
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

// 路由中配合Suspense使用
<Suspense fallback={<div>加载中...</div>}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Suspense>

如果在路由外的任何地方直接import了这些页面组件，它们会被打包进主app.js。

5. 生产环境未开启代码压缩 #

Webpack5生产模式默认开启代码压缩，但如果自定义配置覆盖了默认行为，会导致主包体积剧增。确认配置中mode设为production，且未禁用TerserPlugin：

module.exports = {
  mode: 'production', // 必须设置为production
  optimization: {
    minimize: true, // 确保开启压缩
    minimizer: [
      new require('terser-webpack-plugin')(),
      new require('css-minimizer-webpack-plugin')()
    ]
  }
}

6. 用Bundle Analyzer定位具体问题 #

最直接的方式是用Webpack Bundle Analyzer可视化分析主包内容，找到体积过大的模块：

1. 安装插件：npm install webpack-bundle-analyzer --save-dev
2. 在Webpack配置中添加：

   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   
   module.exports = {
     plugins: [new BundleAnalyzerPlugin()]
   }
   

3. 运行打包命令，会自动打开浏览器页面，展示每个chunk的组成，一目了然找到主包中的大型模块。

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