WebAssembly 是一项新的技术，通过编译 LLVM bitcode，可以用更快的速度来执行 JavaScript 代码，甚至比原生的 JavaScript 函数还快。因此，越来越多的前端应用程序试图使用 WebAssembly 来进行计算密集型任务。
为了方便使用 WebAssembly 技术，这里我们来介绍一个工具：wasm-emscripten-loader。
wasm-emscripten-loader 是什么
wasm-emscripten-loader 是一款 webpack 加载器，适用于将 C 或 C++ 代码编译为 WebAssembly 文件。Emscripten 是一款 LLVM bitcode 编译器，可将 C/C++ 编译成 WebAssembly 字节码格式。
wasm-emscripten-loader 可以使开发者在项目中方便快速地编写 C 和 C++ 代码，并将其编译成 WebAssembly 二进制文件。同时，可直接在 Javascript 中进行调用，从而减少了一种开发者学习成本。
安装
首先需要安装 emscripten：
# 在bash中执行此命令 ~> git clone https://github.com/juj/emsdk.git ~> cd emsdk ~> ./emsdk install latest ~> ./emsdk activate latest ~> source ./emsdk_env.sh
安装完成之后，使用 npm 安装 wasm-emscripten-loader：
npm install --save-dev wasm-emscripten-loader
配置
在 webpack 配置文件中添加配置项：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
------- -------------------------
-------- -
-- --- ---------- --
--------- --- ---------------
-- --- ----
--
--
--
--
--在代码中都可以使用 import 引入 wasm 文件：
import wasm from "./wasm-filename.wasm";
示例
假设我们有一个名为 sum 的 C 函数，请看下面的示例：
$ cat sum.c
#include <stdio.h>
int sum(int x, int y) {
printf("计算 %d + %d\n", x, y);
return x + y;
}下面的命令将和将 C 代码编译为 WebAssembly：
$ emcc sum.c -Os -s WASM=1 -s SIDE_MODULE=1 -o sum.wasm
在 JavaScript 中引入 sum.wasm，并调用 sum 函数：
-- -------------------- ---- -------
-- ------------
------ ---- ---- -------------
------ -- -- -
----- ---------- - ----- ---------------------------------
-----------
--
---------------------------------------------- ---- -- -
---------------- -- -
-------------------
---总结
wasm-emscripten-loader 的使用流程并不复杂。首先安装 emscripten，然后安装 wasm-emscripten-loader。在 webpack 配置文件中添加加载器，程序即可支持 WebAssembly 加速。使用 WebAssembly 能够使我们在计算密集型任务中使用更快的速度，提升代码运行效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739a81e8991b448e98b2