在前端工程化过程中，很多前端开发者都使用过 webpack 来打包项目，保证资源的合并、压缩和优化等。但是，随着项目规模的逐渐增大，Webpack 打包时间逐渐变长，特别是当项目文件数目增多、依赖包比较多时，打包时间更是拖慢。因此，很多前端开发者开始尝试使用 staticshock 这个 npm 包来加速打包。
什么是 staticshock
staticshock 是基于 worker 的模块打包工具，它的原理是将模块打包成 WebAssembly 字节数组，然后在后台利用 worker 模块进行计算，最后返回可以执行的代码。由于使用了 wasm 字节数组的形式，所以整个过程是高度并行的，大大加快了打包速度。
如何使用 staticshock
安装
使用 npm 进行安装
npm install -D staticshock
配置
只需要简单的在 webpack 的配置文件中添加以下配置即可
const { StaticShock } = require("staticshock");
const staticShock = new StaticShock({
workers: 4
});
module.exports = {
plugins: [staticShock.webpackPlugin()]
};执行
然后使用 webpack 打包的时候，加上 --env staticshock 参数即可启用 staticshock 打包。如下：
webpack --env staticshock
示例代码：
下面我们以实际的案例来演示 staticshock 的使用。
创建项目
首先，我们需要创建一个简单的项目，用于打包演示。执行以下命令：
mkdir webpack-staticshock cd webpack-staticshock npm init -y
安装依赖
然后，我们需要安装一些依赖:
npm install -D webpack webpack-cli @babel/core @babel/preset-env babel-loader staticshock
其中，@babel/core、@babel/preset-env、babel-loader 是为了编译 ES6 代码，staticshock 则是为了加速打包。
添加代码
接下来，我们创建如下的应用代码：
// 引入依赖
import { add } from './math';
// 输出结果
console.log(add(1, 2));其中，add 是一个简单的两数相加函数，代码如下：
export function add(a, b) {
return a + b;
}配置 webpack
最后，我们需要为项目创建 webpack 配置文件。在项目根目录下创建一个名为 webpack.config.js 的配置文件，代码如下：
-- -------------------- ---- -------
----- - ----------- - - -----------------------
----- ----------- - --- -------------
-------- -
---
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
-------- ------------------------------
--这个配置文件中，除了一些基本的 webpack 配置项之外，我们通过 new StaticShock({workers: 4}) 在构造函数中传入 workers: 4，表示启用 4 个 worker 进程来进行并行编译。
打包
最后，在控制台执行以下命令即可完成打包：
webpack --env staticshock
打包成功后，会在项目根目录下生成一个名为 dist 的文件夹，里面的 bundle.js 即为打包后的文件。
总结
在使用 staticshock 打包前，我们需要了解它的使用场景。如果项目尺寸较小，使用 staticshock 打包反而可能会降低打包效率；但如果遇到大型的工程项目，使用 staticshock 可以大幅提升打包效率，优化开发环境，减少开发者等待时间，从而提高开发效率。
在实际使用过程中，我们可以通过逐渐增加 worker 的数量，以找到最适合自己项目的打包配置，来最大化加快打包速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63955