在 web worker 中使用动态 import 需要调用全局的 import() 函数,它会返回一个 promise。当模块加载成功时,promise 会解析为包含模块所有导出内容的对象,你可以直接通过该对象访问导出的变量或函数。

Worker 中如何加载并执行 ES Module
在 Worker 内部,直接使用 import('module.js') 即可加载同目录下的 ES Module。加载完成后,通过解构赋值获取具体的导出项,然后执行逻辑。这种方式是异步的,因此通常配合 async/await 使用,或者直接在回调中处理结果。

const worker = new Worker('./worker.js');
// worker.js 内容如下:
self.onmessage = async (e) => {
const { doWork } = await import('./utils.js');
const result = doWork(e.data);
self.postMessage(result);
};
上述代码展示了主线程向 Worker 发送消息,Worker 接收到消息后动态导入 utils.js 中的 doWork 函数,执行计算后将结果发回主线程。这种模式避免了在主线程中阻塞,同时实现了代码的按需加载。
如何处理动态导入的模块路径与错误
动态导入的路径可以是相对路径或绝对路径,但必须遵循同源策略。如果模块加载失败,例如文件不存在或网络错误,Promise 会拒绝(reject),此时需要通过 try...catch 块捕获异常,防止 Worker 因未处理的错误而终止。此外,动态导入的模块作用域是独立的,不会污染全局命名空间。

self.onmessage = async (e) => {
try {
const module = await import(`./modules/${e.data.type}.js`);
if (module.handler) {
module.handler(e.data.payload);
} else {
throw new Error('Handler not found');
}
} catch (error) {
console.error('Failed to load module:', error);
self.postMessage({ error: error.message });
}
};
这段代码演示了根据主线程传入的类型参数动态加载不同模块的策略。通过模板字符串构建路径,可以实现更灵活的模块分发。如果在加载过程中发生错误,Worker 会捕获异常并向主线程发送错误信息,确保程序的健壮性。这种机制特别适用于大型应用,可以根据用户操作动态加载功能模块,减少初始加载时间。
动态导入的返回值结构是什么
动态 import() 返回的 Promise 解析后的对象是一个模块命名空间对象。它包含模块中所有通过 export 导出的绑定。如果模块使用 export default,则该默认导出会被挂载到对象的 default 属性上。其他具名导出则直接作为对象的属性存在。这意味着你可以通过属性访问的方式获取任何导出的值,而不需要使用 require 那样的 CommonJS 风格。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











