如何在Vite生产构建中于Web Worker导入Wasm？

问题核心是你为Worker配置了IIFE输出格式，这种格式不支持动态import()的正确解析——开发环境Vite默认用ES模块所以没问题，但生产构建后会导致导入的photon为undefined。以下是具体修复方案：

1. 调整Worker的输出格式为ES模块 #

修改Vite配置，把Worker的Rollup输出格式从iife改为es，Web Worker原生支持ES模块，且该格式能正确处理动态导入：

import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default {
    plugins: [
        wasm(),
        topLevelAwait()
    ],
    worker: {
        rollupOptions: {
            output: {
                format: "es", // 替换为ES模块格式
            }
        },
        plugins: () => [wasm(), topLevelAwait()]
    },
};

或者更简洁的写法，直接指定Worker格式：

worker: {
    format: "es",
    plugins: () => [wasm(), topLevelAwait()]
},

2. 改用静态导入（可选，更稳定） #

如果业务场景允许，把动态导入改为静态导入，避免打包时的动态解析问题：

import * as photon from '@silvia-odwyer/photon';

3. 插件版本检查 #

确保vite-plugin-wasm和vite-plugin-top-level-await是最新版本，避免版本兼容问题：

npm update vite-plugin-wasm vite-plugin-top-level-await

原因说明 #

开发环境中Vite对Worker默认使用ES模块打包，动态import()能正常工作；但生产构建时你指定了IIFE格式，这种自执行函数格式无法正确处理异步动态导入，导致模块加载失败，最终photon为undefined。切换为ES模块格式后，Worker能按照标准方式加载模块，Wasm相关的导入也能正常解析。

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