前言
在前端开发中，有时我们需要使用 Web Workers 技术来避免主线程被占用，提高页面性能。Web Workers 使得我们可以将一些耗时的操作放到另一个线程中处理，同时又不会影响页面的渲染和交互。
而 webworkify-webpack2 就是一个能够让我们方便地将代码打包成 Web Worker 的 npm 包。在本篇文章中，我们将详细介绍 webworkify-webpack2 的使用方法，以及一些使用的注意事项。
安装
我们可以通过 npm 来安装 webworkify-webpack2：
npm install webworkify-webpack2
使用方法
第一步：创建一个普通的模块
首先，我们需要创建一个普通的模块，这个模块将会作为我们需要在 Web Worker 中运行的代码。
// sum.js
export default function sum(a, b) {
return a + b;
}第二步：使用 webworkify-webpack2 打包
接下来，我们需要使用 webworkify-webpack2 将代码打包成一个可以在 Web Worker 中运行的 js 文件。我们可以在 webpack 的配置文件中添加如下代码：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------------- - -------------------------
----- ----------------- - -------------------------------
-------------- - -
------ -------------
------- -
----- ----------------------- --------
--------- ------------------
--
------- -
------ -
-
----- ----------------
---- - ------- --------------- -
-
--
-------- -
--- -------------------
------ --------------
------- ------------------
--
-
-
--在上面的代码中，我们使用了 worker-loader 来处理 worker 文件，并使用了 webworkify-webpack2 来将普通的模块代码打包成 worker-bundle.js，这样我们就可以在 Web Worker 中使用模块中的方法和变量。
第三步：在主线程中启动 Web Worker
最后，我们需要在主线程中启动 Web Worker，并将我们刚刚打包好的 worker-bundle.js 作为工作脚本传递进去。
-- -------------------- ---- ------- -- -------- ------ --- ---- -------- ----- ------ - --- ------------------------------ -------------------- -------- -------- ----- ------ -- ---
在上面的代码中，我们使用了 postMessage() 方法向 Web Worker 发送了一条消息（一个带有 message 和 data 两个属性的对象），并使用我们在模块中定义的方法计算了一个值。
额外注意事项
- Web Worker 中的代码不能直接访问 DOM 对象，这样会导致错误。
- 在 Web Worker 中，需要使用 importScripts() 方法来加载其他脚本文件。
- Web Worker 中不能访问一些 window 对象的属性和方法，如 window.location。
示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
-- ------
------ ------- -------- ------ -- -
------ - - --
-
-- ---------
--------------------------
-------------------------------- --------------- -
----- - ---- - - ------
-------------------- -------- -- ----------- ------
---
-- -----------------
----- ---- - ----------------
----- ------------- - -------------------------
----- ----------------- - -------------------------------
-------------- - -
------ -------------
------- -
----- ----------------------- --------
--------- ------------------
--
------- -
------ -
-
----- ----------------
---- - ------- --------------- -
-
--
-------- -
--- -------------------
------ --------------
------- ------------------
--
-
-
--
-- --------
------ --- ---- --------
----- ------ - --- ------------------------------
--------------------
-------- --------
----- ------ --
---
---------------------------------- --------------- -
-------------------- -------- -- ---------- ------------
---总结
使用 webworkify-webpack2，我们可以方便地将普通的模块打包成 Web Worker，从而提高页面的性能。同时，在使用 Web Worker 时需要遵守一些额外的注意事项，比如不能访问 DOM 对象、要使用 importScripts() 方法加载其他脚本文件、不能访问 window 对象的一些属性和方法等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc523