手把手教你写提高100%性能的RustWasm版md5,你上你也行!

本文所言绝非虚言! 在我开发文件上传功能时，思考除开使用webWorker还有什么优化方向时，我突然想到md5可以用rust写了编写成wasm啊！但我脑瓜子一转，我不会写md5啊。

本着遇到问题解决问题的方向，我选择调库！很快我就看见了这个库

居然有巨多采用webassembly编译的这种加密算法

但是，是用C写的

其实能用，但是我喜欢~~语言界的原神~~Rust，可惜翻了一下没找到~

所以，让我们自己来封装一个吧！

创建工程

创建一个名为md5_Rwasm的工程

git 复制代码

Cargo new md5_Rwasm --lib

选择一个心仪的md5代码库

我们来到crates.io搜索一个心仪的md5代码库，然后添加到依赖中~

再把能编译成wasm的wasm-bindgen库添加到依赖中~

Cargo.toml

git 复制代码

[package]
name = "md5-rwasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
md5 = "0.7.0"
wasm-bindgen = "0.2.95"

开始瞎编

在我们的源码中，编写一个在前端中进行调用的函数

src\lib.rs

rust 复制代码

use md5 as as_md5;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn md5(data: &str) -> md5::Digest {
    as_md5::compute(data)
}

这个时候显示

这个报错简而言之就是说，这个名为md5::Digest无法编译成js所对应的一个数据类型

这个时候我们再添加一个名为hex的库

Cargo.toml

diff 复制代码

[package]
name = "md5-rwasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
md5 = "0.7.0"
wasm-bindgen = "0.2.95"
+hex = "0.4.3"

把我们的代码变成：

src\lib.rs

rust 复制代码

use hex;
use md5 as as_md5;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn md5(data: &str) -> String {
    hex::encode((as_md5::compute(data)).0)
}

这个时候返回的就是一个String类型的数据

我们来添加个测试代码，测试一下~

diff 复制代码

use hex;
use md5 as as_md5;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn md5(data: &str) -> String {
    hex::encode((as_md5::compute(data)).0)
}

+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn it_works() {
+        let data = "hello world";
+        let hash = md5(data);
+        println!("MD5: {}", hash);
+    }
+}

没有一点问题！!

Compiling！！！

既然没有问题，我们来编译一下噢~

git 复制代码

wasm-pack build --target web

非常棒，也没有什么问题！哪我们尝试在前端用一下~

顺便安装一个js版本的md5

html 复制代码

pnpm add md5

html 复制代码

<head>
  <title>Rwasm_md5测试</title>
</head>

<body>
  <script type="module">
    import init, { md5 } from './pkg/md5_rwasm.js'
    {
      console.time("md5_Rwasm")
      await init()
      const data = 'hello world'
      const result = md5(data)
      console.log(result)
      console.timeEnd("md5_Rwasm")
    }
  </script>

  <script src="./node_modules/md5/dist/md5.min.js"></script>
  <script>
    console.time("md5_js")
    const data = 'hello world'
    const result = MD5(data)
    console.log(result)
    console.timeEnd("md5_js") 
  </script>
</body>

</html>

容我们测试一下~

卧槽，出事了！变慢了怎么回事！！！

我细细品味了一下我写的代码后，问题在于初始wasm时的耗时也被记录进去了

现在修改一下我们的代码

diff 复制代码

  <script type="module">
    import init, { md5 } from './pkg/md5_rwasm.js'
    {
-     console.time("md5_Rwasm")
      await init()
+     console.time("md5_Rwasm")
      const data = 'hello world'
      const result = md5(data)
      console.log(result)
      console.timeEnd("md5_Rwasm")
    }
  </script>

  <script src="./node_modules/md5/dist/md5.min.js"></script>
  <script>
    console.time("md5_js")
    const data = 'hello world'
    const result = MD5(data)
    console.log(result)
    console.timeEnd("md5_js") 
  </script>

现在就符合预期了~这就是原神Rust的魅力！

结语

但是，作为前端开发我们也不可忽视加载wasm时产生的时间。比如在巨大的项目中，这增加的时间既有可能会影响到我们的首屏加载，而解决方案也是显而易见的。我们把加载wasm放在webworker中即可解决。

本文只是希望给如今的RustWasm社区，来一个抛砖引玉。希望通过这小小的文章，能撬动各位大佬，能真正给如今的RustWasm社区代码全新的方向。

该包已上线npm,欢迎前往下载~

md5_rwasm - npm

css 复制代码

npm i md5_rwasm

若想CR我的代码，请见如下链接, 也非常欢迎大佬指点~~~

GitHub - FengBuPi/md5_Rwasm: 使用Rust编写的md5加密算法，编译为了webassembly