Vite多入口构建偶尔生成额外文件，求原因及解决方法

配置与现象 #

我的应用配置了2个入口，vite.config.js内容如下：

export default defineConfig({
  build: {
    emptyOutDir: false,
    manifest: true,
    outDir: 'dist',
    rollupOptions: {
      input: {
        app: '/src/app/app.js',
        pub: '/src/app/pub.js'
      }
    },
    commonjsOptions: { include: [] }
  },
  optimizeDeps: { disabled: false },
  plugins: [vue()]
})

正常构建后，dist文件夹会生成1个manifest.json，对应app.css/js、pub.css/js及应用引用的图片等资源。但偶尔执行vite build时，dist会多出一组随机的CSS/JS文件，这些文件来自代码库或node_modules中的组件/JS文件，且常包含本该在dist/app.js中的代码。比如某次构建生成了代码库中InputRadios.vue对应的文件，且包含大部分应用代码；注释该组件引用后，又出现VueRouter.css/js这类文件，以此类推。

已从Vite 3升级到Vite 4，尝试过多种配置调整仍未解决问题，想咨询：这是预期行为吗？还是对rollupOptions的理解有误？

解答 #

1. 这不是预期行为，属于Rollup依赖分析或构建过程中的异常拆分问题，和你对rollupOptions的基础理解无关。

2. 核心原因分析

   • commonjsOptions: { include: [] }配置过于激进：该配置会完全禁用CommonJS模块的转换，若项目中存在CommonJS格式的依赖，Vite无法正确解析其依赖关系，进而导致Rollup的依赖树分析混乱，触发异常代码拆分。
   • Rollup自动拆分逻辑异常：虽然Rollup默认会拆分多入口共享模块，但你遇到的是单入口内的模块被随机拆分，大概率是项目中存在循环依赖（如组件A导入组件B，B又导入A），或是动态导入写法不规范，导致Rollup无法正确识别依赖边界。
   • Vite依赖预构建缓存异常：升级到Vite4后，依赖预构建的逻辑有更新，node_modules/.vite中的缓存可能存在残留，干扰了构建过程。

3. 排查与解决步骤

   • 清理缓存并强制重建：删除node_modules/.vite和dist目录，执行vite build --emptyOutDir强制清空构建目录后重新构建，排除旧缓存或文件残留的影响。
   • 移除commonjsOptions: { include: [] }：保留默认的CommonJS转换逻辑，若确实需要针对特定模块禁用转换，可改为include: ['node_modules/xxx']精准配置。
   • 检查循环依赖：使用工具（如rollup-plugin-cycle）检测项目中的循环依赖，修复这类问题。
   • 规范动态导入：若项目中有动态导入，确保添加明确的chunk名称注释，比如import('../components/InputRadios.vue') /* webpackChunkName: "input-radios" */，帮助Rollup正确识别拆分规则。

4. 临时兜底方案
   若上述排查无效，可在Rollup配置中强制控制代码拆分规则：

rollupOptions: {
  input: {
    app: '/src/app/app.js',
    pub: '/src/app/pub.js'
  },
  output: {
    // 禁用自动拆分，所有代码打包到入口文件中
    manualChunks: undefined
    // 或手动指定仅拆分node_modules依赖
    // manualChunks: (id) => {
    //   if (id.includes('node_modules')) {
    //     return 'vendor';
    //   }
    // }
  }
}

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