什么是 @kadadev/worker-loader
在前端开发过程中，我们经常需要在 web worker 中执行某些函数以获得更好的性能和体验。@kadadev/worker-loader 是一个 npm 包，它为我们提供了一个方便的方式来加载我们的 web worker 文件。
它的前身是 worker-loader，但 @kadadev/worker-loader 做了很多改善以满足我们更严格的需求。
安装和使用
@kadadev/worker-loader 可以通过 npm 安装：
npm install @kadadev/worker-loader --save-dev
使用前，需要配置 webpack.config.js 来加载 @kadadev/worker-loader：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ----------------
---- -
------- -------------------------
--
--
--
--
--我们看到这里配置了一个规则用于匹配当前打包文件的后缀是否是 .worker.js，如果是的话，就使用 @kadadev/worker-loader 进行打包。
在 worker 中，我们可以像正常的 JS 文件一样编写代码。并需要将代码导出为一个函数以提供给 loader 加载：
// worker.js
self.addEventListener('message', function (e) {
console.log(e.data);
self.postMessage('You said: ' + e.data);
});在主线程中，我们可以通过 new Worker() 来加载 worker，它返回一个 Worker 对象。并且我们可以使用 postMessage() 方法向 worker 发送消息：
// page.js
const worker = new Worker('./src/worker.js');
worker.addEventListener('message', (event) => {
console.log('Worker said:', event.data);
});
worker.postMessage('Hello worker!');当 worker 接收到主线程发送的消息时，我们在 worker.addEventListener('message', ...) 中注册了回调函数以接收消息。
当 worker 执行完成时，我们可以使用 worker.terminate() 方法来终止 worker 的执行。
为什么选择 @kadadev/worker-loader
@kadadev/worker-loader 相较于 worker-loader 具有以下优点：
- 提供了 TypeScript 的类型声明以便于开发时的代码提示；
- 解决了 worker 对象无法在某些浏览器中序列化的问题，同时使 worker 对象支持使用 import 导入；
- 支持自定义 worker 文件名，方便管理和更具可读性；
- 支持使用 Worker 的几种不同方式（blob, base64, xhr, etc.）。
示例代码
下面是一个简单的示例：
-- -------------------- ---- -------
-- ---------
--------------------------- ------- -- -
----- -
-----
-------- - -- - --
- - -----------
-- ----- --- ------ -
------------- ------- - - - ---
- ---- -- ----- --- ----------- -
------------- ------- - - - ---
-
---
-- -------
------ ------ ---- ----------------------------------
----- ------ - --- ---------
---------------------------------- ------- -- -
------------------- --------- -------------------
---
-------------------- ----- ------ -------- - -- -- -- - - ---
-------------------- ----- ----------- -------- - -- -- -- - - ---在这个示例中，我们定义了一个 worker.ts 文件，其中我们通过 addEventListener() 监听了 message 事件，并根据 event.data 中携带的数据来计算结果并发送回主进程。
在 page.js 文件中，我们通过 import Worker from '@kadadev/worker-loader!./worker'; 的方式来加载 worker.ts 文件，并且创建一个 Worker 实例。之后我们使用 worker.postMessage() 向 worker 发送我们需要计算的数据，并使用 worker.addEventListener('message', ...) 感知 worker 返回的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d0927023822398