如何减小create-react-app生成的main.chunk.js体积或拆分为多个更小文件

一、默认打包规则 #

create-react-app（以下简称CRA）底层基于webpack实现打包，main.chunk.js的打包逻辑遵循以下规则：

• 以src/index.js为入口，所有被入口文件直接/间接同步导入的代码，都会被合并打包进main.chunk.js
• 只有通过import()动态导入语法声明的模块，才会被拆分为独立的chunk，不会被打入main.chunk.js

你当前遇到的路由拆分后非首页代码仍进入main包的问题，绝大多数情况是存在隐式的同步导入，要么是路由组件导入写法错误，要么是全局公共文件意外引入了非首页目录下的代码。

二、非首页代码剥离方案 #

1. 修正路由组件导入写法 #

必须使用React.lazy + 动态import()的写法声明异步路由组件，错误的同步导入写法即便配置了路由规则，也会被直接打入main包：

// 错误写法：同步导入，直接进入main.chunk.js
// import ChangeService from './pages/changeService'

// 正确写法：动态导入，会单独拆分为独立chunk
const ChangeService = React.lazy(() => import('./pages/changeService'))

// 路由配置需要搭配Suspense使用
function App() {
  return (
    <React.Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/changeService" element={<ChangeService />} />
        {/* 其他路由配置 */}
      </Routes>
    </React.Suspense>
  )
}

2. 排查全局隐式同步导入 #

逐一检查src/App.js、src/index.js、全局工具函数、全局公共组件等被首屏同步引入的文件，确认没有任何一行代码同步导入了changeService目录下的组件、工具、常量等内容，哪怕只引入了一个小函数，整个changeService的依赖链都会被打入main包。

3. 自定义拆包规则（可选进阶优化） #

如果需要更灵活的拆包规则，无需eject CRA的默认配置，可以通过craco或react-app-rewired修改webpack的splitChunks配置，实现公共依赖、非核心代码的自动拆分，参考配置如下：

// craco.config.js 示例
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.optimization.splitChunks = {
        chunks: 'all', // 对同步和异步导入的模块都生效
        cacheGroups: {
          // 拆分node_modules第三方依赖到独立vendors包
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            priority: 10
          },
          // 拆分被至少2个路由引用的公共代码到common包
          common: {
            name: 'common',
            minChunks: 2,
            priority: 5,
            reuseExistingChunk: true
          }
        }
      }
      return webpackConfig
    }
  }
}

4. 验证优化结果 #

修改完成后重新执行构建命令，再通过cra-bundle-analyzer查看打包产物，确认changeService相关代码已经从main.chunk.js中移除，仅在访问对应路由时才会加载。

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