Vite中如何获取独立模块包URL供Web Worker动态导入？

核心思路 #

要解决生产构建时自定义模块被摇树优化的问题，关键是让Vite明确识别到该模块需要被打包为独立chunk，同时能编程获取其URL。以下是Vite官方支持的实现方式：

1. 用 manualChunks 拆分独立代码包 #

通过Vite的Rollup配置，显式将自定义模块拆分到独立chunk，从根源避免被摇树优化。在vite.config.js中添加：

export default {
  build: {
    rollupOptions: {
      output: {
        // 将指定模块打包为名为custom-worker-package的独立chunk
        manualChunks: {
          'custom-worker-package': ['src/path/to/your/custom-module.js']
        }
      }
    }
  }
}

生产构建后，会生成类似custom-worker-package-[hash].js的独立文件，不会被合并到主包或移除。

2. 用 import.meta.glob 获取独立包URL #

使用Vite的import.meta.glob语法，让Vite追踪到模块的引用，同时直接获取其打包后的URL：

// 在主应用中获取自定义包的URL
const moduleUrlMap = import.meta.glob(
  'src/path/to/your/custom-module.js',
  { as: 'url', eager: false }
);
// 获取URL（生产环境会自动替换为带hash的chunk地址）
const customPackageUrl = await moduleUrlMap['src/path/to/your/custom-module.js']();

// 将URL传给你的库API，再由Web Worker动态导入
yourLibraryApi.setWorkerPackageUrl(customPackageUrl);

• as: 'url'：指定直接返回模块的打包后URL，而非模块内容
• eager: false：采用懒加载模式，避免模块被提前打包进主包

3. Web Worker 动态导入实现 #

在Web Worker中通过import()加载传入的URL即可：

// Web Worker内部代码
self.addEventListener('message', async (event) => {
  const { customPackageUrl } = event.data;
  const customModule = await import(customPackageUrl);
  // 使用自定义模块的导出内容
  customModule.yourExportedFunction();
});

4. 可选：优化开发环境一致性 #

如果开发模式下遇到依赖预构建问题，可通过optimizeDeps强制Vite预构建自定义模块：

export default {
  optimizeDeps: {
    include: ['src/path/to/your/custom-module.js']
  }
}

为什么之前的方案生产环境失效？ #

Vite生产构建时的摇树优化会移除没有被静态引用或Vite无法追踪到引用关系的模块。上述方法通过manualChunks显式声明独立chunk，或import.meta.glob让Vite识别到模块的使用场景，从而确保模块被保留并打包为独立文件。

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