Vite v2.9.14：如何在生产构建时为Classic Web Worker添加依赖脚本

使用Vite v2.9.14 开发项目时，遇到以下问题：项目中的Classic Web Worker通过importScripts('filename.js')引入脚本，本地开发阶段一切正常，但执行vite build进行生产构建、代码拆分后，Web Worker对应的assets目录中缺失所需的引入脚本。

文件结构 #

-- components
  -- Player
  -- libffmpeg.wasm
  -- libffmpeg.js
  -- decoder.js
  -- downloader.js
  -- websocket.js

当前Vite配置 #

envDir: root,
root: path.resolve(root, './app/src'),
plugins: [
    react({
        jsxRuntime: 'automatic',
    }),
],
optimizeDeps: {
    esbuildOptions: {
        keepNames: true,
    },
},
build: {
    target: 'esnext',
    outDir: path.resolve(root, './app/dist'),
    emptyOutDir: true,
}

Web Worker创建方式 #

new Worker(
    new URL('./downloader.js', import.meta.url),
);

出错位置 #

importScripts('libffmpeg.js')

状态对比 #

• 开发模式（vite --development）：Worker能够正常加载libffmpeg.js等依赖脚本
• 生产构建后（vite build + vite preview）：Worker所在的assets目录中不存在libffmpeg.js，导致加载失败

解决方案 #

方案1：改用ES模块Worker（推荐） #

将Classic Worker改为模块类型，让Vite自动分析并打包依赖：

1. 修改Worker创建代码，添加type: 'module'：

new Worker(
    new URL('./downloader.js', import.meta.url),
    { type: 'module' }
);

2. 将downloader.js中的importScripts替换为ES导入：

import './libffmpeg.js';

这样Vite会自动识别libffmpeg.js为依赖，构建时将其打包到assets目录中。

方案2：手动配置Rollup复制依赖脚本 #

如果必须保留Classic Worker类型，可以通过Rollup插件手动复制所需资源：

修改Vite配置中的build.rollupOptions：

build: {
    target: 'esnext',
    outDir: path.resolve(root, './app/dist'),
    emptyOutDir: true,
    rollupOptions: {
        plugins: [
            {
                name: 'copy-worker-deps',
                generateBundle(options) {
                    const fs = require('fs');
                    const path = require('path');
                    const srcDir = path.resolve(root, './app/src/components/Player');
                    const destDir = path.resolve(options.dir, 'assets');
                    
                    // 确保目标目录存在
                    if (!fs.existsSync(destDir)) {
                        fs.mkdirSync(destDir, { recursive: true });
                    }
                    
                    // 复制libffmpeg相关文件
                    ['libffmpeg.js', 'libffmpeg.wasm'].forEach(file => {
                        const srcPath = path.join(srcDir, file);
                        if (fs.existsSync(srcPath)) {
                            fs.copyFileSync(srcPath, path.join(destDir, file));
                        }
                    });
                }
            }
        ]
    }
}

同时调整downloader.js中的路径，适配构建后的位置：

// 相对于Worker打包后的路径
importScripts('../assets/libffmpeg.js');

注意：路径需根据实际打包后的Worker位置调整。

方案3：使用静态资源复制插件 #

借助vite-plugin-static-copy插件自动复制静态资源：

1. 安装插件：

npm install vite-plugin-static-copy --save-dev

2. 修改Vite配置：

import { viteStaticCopy } from 'vite-plugin-static-copy';

plugins: [
    react({ jsxRuntime: 'automatic' }),
    viteStaticCopy({
        targets: [
            {
                src: path.resolve(root, './app/src/components/Player/libffmpeg.*'),
                dest: 'assets'
            }
        ]
    })
]

构建时插件会自动将libffmpeg.js和libffmpeg.wasm复制到dist/assets目录，此时downloader.js中的importScripts('libffmpeg.js')路径无需修改（Worker打包后也在assets目录，相对路径生效）。

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