给 Web 前端工程师看的用 Rust 开发 wasm 组件实战 | 京东云技术团队

什么是wasm组件？

wasm 全称 WebAssembly，是通过虚拟机的方式，可以在服务端、客户端如浏览器等环境执行的二进制程序。他有速度快、效率高、可移植的特点。

对我们 Web 前端工程最大的好处就是可以在浏览器端使用二进制程序处理一些计算量大的处理，使用他比 javascript 快的特点优化性能。

目前浏览器对wasm的兼容性如下：

在移动端除了 android 4.4 和 ios 10 下不支持外，其他版本都能提供支持。还需要注意的是 wasm 有可能占用大量内存，使用第三方包含 wasm 调用的组件需要注意内存占用防止闪退。

为什么用Rust？

wasm模块 可以用多种语言来编译，包括 C/C++/C#、Rust、JAVA、Go。在这里使用 Rust 是因为他有严格的内存管理机制，从语法上尽量避免内存溢出，让工程师写出更安全的程序。

而且还有配套的工具 wasm-pack，让使用 Rust 编写的代码，编译包装成 npm 包，让使用这段程序的其他代码可以像使用其他公共库一样调用，不需要额外学习成本。

工具安装

1. 安装 rustup，他是 Rust 安装器和版本管理工具。对于 web 前端来说相当于 nvm 这样的工具。
   按照 rust 官网的方法安装：https://www.rust-lang.org/zh-CN/tools/install
   同时也会安装 cargo，他是 Rust 的构建工具和包管理器。对于 web 前端来说相当于 npm 这样的工具。

2. 安装 wasm-pack，他是上文提到的把 rust 程序编译包装成 wasm 组件的工具。
   同样按照 wasm-pack 官网的方法安装：https://rustwasm.github.io/wasm-pack/installer/

3. 使用 wasm 模板
   使用 wasm-pack 提供的模板可以快速生成 rust 的 wasm 项目。

cargo generate --git https://github.com/rustwasm/wasm-pack-template

输入希望的项目目录名称，将新建目录并在其中生成项目。

在目录下我们可以看到几个文件，其中一个是 Cargo.toml ，这个是 rust 项目的描述文件，对于 web 前端来说相当于 package.json 文件。

项目目录下还有一个 src 目录，里面有 lib.rs 和