遇到延迟加载网络工作者代码的问题

Question

我有 4 个 JS 文件（one.js、two.js、三.js 和四.js）。 One.js 使用 importScripts 作为 webworker 代码导入two.js，two.js 导入三.js 和三.js 导入 four.js。如何延迟加载这些文件以保留 webworker 功能。

当我尝试实现相同的目标时，我面临 importScripts is not Defined 错误，在这种情况下我应该延迟加载所有文件吗？

Answer 1

要在保留 webworker 功能的同时延迟加载 JS 文件，您可以使用以下方法：

1. 创建一个名为

   lazyloader.js

   的新文件。
2. 在

   lazyloader.js

   中，使用

   importScripts

   导入 webworker 脚本和 JS 文件。

这是一个示例（您可以相应地自定义它）：

// lazyloader.js

self.onmessage = function(e) {
  importScripts('one.js', 'two.js', 'three.js', 'four.js');
};

3. 在主脚本中，向 webworker 发送消息以加载 JS 文件：

// main.js

var worker = new Worker('lazyloader.js');
worker.postMessage('load');

4. 在您的 webworker 脚本中，处理来自主脚本的消息以加载 JS 文件：

// webworker.js

self.onmessage = function(e) {
  if (e.data === 'load') {
    importScripts('one.js', 'two.js', 'three.js', 'four.js');
  }
};

使用这种方法，您可以延迟加载 JS 文件，同时保留 webworker 功能。当 webworker 收到来自主脚本的消息时，它将加载 JS 文件，确保它们仅在需要时加载。