如何在Vite中覆盖Rollup的output.format配置？解决代码拆分构建报错

问题分析 #

报错RollupError: Invalid value "iife" for option "output.format"的核心原因是：Web Worker代码触发了代码分割，但IIFE/UMD格式不支持代码分割场景，必须使用ES模块格式（es/esm）。

正确配置方法 #

方案1：直接指定Worker输出格式 #

Vite提供了worker.format专属配置项，直接控制Web Worker的打包格式，优先级高于Rollup子配置，修改vite.config.ts：

export default defineConfig({
  // ...其他已有配置
  worker: {
    format: 'es', // 将Worker输出设为ES模块，天然支持代码分割
  },
});

方案2：精细配置Worker的Rollup参数 #

若需自定义更多Rollup规则，在worker.rollupOptions中明确输出格式，同时处理代码分割逻辑：

export default defineConfig({
  // ...其他已有配置
  worker: {
    rollupOptions: {
      output: {
        format: 'esm',
        // 若无需代码分割，可开启以下选项避免分割冲突
        // inlineDynamicImports: true,
      },
    },
  },
});

关键注意点 #

• 主应用的build.rollupOptions.output.format仅作用于主代码，不会影响Web Worker的打包规则，必须单独配置Worker相关项。
• 若Worker代码中存在import()动态导入，必须使用ES模块格式；若无需代码分割，开启inlineDynamicImports可强制将所有代码打包为单一文件，避免格式冲突。

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