将单个React/Vite项目拆分为多入口的实现问题求助

问题根源 #

你遇到的情况是因为Rollup（Vite底层打包工具）默认开启了自动代码拆分，它会把多个入口共享的模块（包括自定义组件、React、MUI等）提取到独立的chunk中，导致入口文件仅保留导入逻辑、体积极小，这和你希望每个入口独立打包、包含自身所有依赖的需求相悖。

解决方案 #

1. 禁用自动代码拆分，强制每个入口打包完整依赖 #

修改Vite配置中的rollupOptions，添加manualChunks: () => undefined，彻底关闭Rollup的自动公共模块拆分：

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        edit: './edit/index.html',
        home: './index.html',
        view: './view/index.html'
      },
      // 禁用自动拆分公共模块，每个入口打包所有依赖
      manualChunks: () => undefined,
      output: {
        // 自定义输出文件名，让命名更清晰
        entryFileNames: 'assets/[name]-[hash].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    }
  }
})

2. 确保入口HTML的脚本引用正确 #

检查每个入口HTML的<script>标签，确保直接引入对应业务入口文件，避免间接依赖：

• index.html（Home页面）：

<script type="module" src="/src/home.jsx"></script>

• edit/index.html（Edit页面）：

<script type="module" src="/src/edit.jsx"></script>

• view/index.html（View页面）：

<script type="module" src="/src/view.jsx"></script>

3. 验证打包结果 #

重新执行npm run build后，你会看到dist/assets下生成的edit-[hash].js、home-[hash].js、view-[hash].js体积明显增大，每个文件都包含对应页面的所有依赖（包括React、MUI、自定义组件等），不再出现单独的component-[hash].js这类公共chunk。

补充说明 #

如果后续你想在允许部分公共模块复用的同时，保证页面核心代码内联，可以调整manualChunks为自定义函数，比如只把React、MUI这类第三方库拆成公共chunk，自定义组件仍随入口打包：

manualChunks: (id) => {
  // 将第三方依赖拆到vendor chunk，自定义组件随入口打包
  if (id.includes('node_modules')) {
    return 'vendor';
  }
}

但根据你的需求，优先推荐第一种完全禁用自动拆分的方案。

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