Vite构建Chrome扩展时禁用JS代码分割并打包为单文件的配置方法

我懂你在开发Chrome扩展时的困惑——想生成三个不同的入口点，但又怕代码分割产生额外的JS文件，导致不必要的导入问题。之前用manualChunks: () => undefined没完全解决，还是会生成多个JS资产，确实挺闹心的。

别着急，咱们调整下Vite配置就能搞定，核心是明确强制Rollup把所有代码都打包到单一文件里，避免任何自动分割。下面是具体的配置方案：

完整Vite配置示例 #

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    // 保留你原有的基础配置，比如插件、路径解析等
    build: {
      // 可选：如果不需要CSS分割成单独文件，可关闭该项
      cssCodeSplit: false,
      rollupOptions: {
        // 配置你的三个Chrome扩展入口，替换成你实际的文件路径
        input: {
          popup: './src/popup.html',
          content: './src/content.js',
          background: './src/background.js'
        },
        output: {
          // 强制所有模块打包到同一个chunk中，彻底禁用代码分割
          // 用固定名称的方式比直接设undefined更稳定，适配多数Vite版本
          manualChunks: () => 'single-bundle',
          // 如果上述方式不生效，也可以尝试直接设置为undefined
          // manualChunks: undefined
        }
      },
      // 部分Vite版本中需要明确关闭该项，禁用自动代码分割
      splitChunks: false
    }
  };
});

额外排查点 #

如果配置后还是出现多个JS文件，可以检查这两个地方：

• 看看代码里有没有用import()动态导入语法，这种语法会强制触发代码分割，得换成静态的import ... from ...语法
• 尝试升级Vite到最新稳定版，旧版本可能存在manualChunks配置不生效的bug

内容来源于stack exchange