使用Vite构建React项目，能否进一步拆分过大的react-dom包？

可以进一步优化react-dom-vendor的体积，甚至拆分出更细粒度的chunk，以下是具体可行的方案：

1. 细粒度拆分react-dom模块 #

react-dom内部包含客户端渲染、服务端渲染等不同功能模块，若你的项目仅使用客户端渲染，可以在manualChunks中拆分这些子模块，避免打包冗余代码：

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "build",
    rollupOptions: {
      output: {
        manualChunks(id){
          if (id.includes('node_modules')) {
            if(id.includes("antd")){
              return "antd-vendor";
            }else if(id.includes("react-dom/client")){
              return "react-dom-client";
            }else if(id.includes("react-dom/server")){
              return "react-dom-server";
            }else if(id.includes("react-dom")){
              return "react-dom-core";
            }else if(id.includes("react-router-dom")){
              return "react-router-dom-vendor";
            }else if(id.includes("redux")){
              return "redux-vendor";
            }
            return 'vendor';
          }
        }
      }
    }
  }
})

如果项目未用到服务端渲染相关代码，react-dom-server chunk不会被实际加载，从而减少主依赖chunk的体积。

2. 启用更激进的压缩优化 #

替换Vite默认的Terser压缩为Esbuild，可获得更快的压缩速度和更优的压缩效果，同时配置移除冗余代码：

build: {
  // ...其他配置
  minify: 'esbuild',
  esbuild: {
    minifyIdentifiers: true,
    minifySyntax: true,
    minifyWhitespace: true,
    drop: ['console', 'debugger'], // 移除生产环境不需要的调试代码
  }
}

3. 强化Tree Shaking与依赖预构建 #

Vite生产模式默认开启Tree Shaking，可通过配置明确强化优化，并指定预构建核心依赖，减少冗余打包：

build: {
  // ...其他配置
  treeShake: true,
  optimizeDeps: {
    include: ['react-dom/client'], // 明确预构建项目实际用到的react-dom子模块
  }
}

4. 清理冗余依赖 #

• 执行npm ls react-dom或pnpm why react-dom，确认项目中是否存在多个版本的react-dom，多版本会导致重复打包，需统一依赖版本。
• 检查业务代码是否误引入react-dom/test-utils等开发环境模块，这类代码不应出现在生产构建中。

5. 结合路由级代码分割 #

通过动态导入拆分业务代码，间接减少初始加载时对react-dom chunk的依赖压力：

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

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