腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

WebAssembly增強(qiáng)前端應(yīng)用技巧詳解

更新時(shí)間：2023年02月20日 10:00:24 作者：PuffMeow

這篇文章主要為大家介紹了WebAssembly增強(qiáng)前端應(yīng)用技巧示例詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

準(zhǔn)備

此篇文章我們主要使用 Rust 來(lái)編寫我們的 WebAssembly 工具庫(kù)然后在 React 應(yīng)用進(jìn)行使用。所以需要準(zhǔn)備好下列的環(huán)境

Rust 開(kāi)發(fā)環(huán)境(rustup、rustc、cargo 這些)
前端開(kāi)發(fā)環(huán)境(node、npm 這些)
wasm-pack (cargo install wasm-pack)

開(kāi)始

開(kāi)始前我們先要準(zhǔn)備一個(gè)前端應(yīng)用，這里我們使用 create-react-app 來(lái)創(chuàng)建一個(gè) React 項(xiàng)目。如果沒(méi)有安裝 create-react-app ，先用 pnpm (npm / yarn 也行)全局安裝一下

npm install -g create-react-app

創(chuàng)建項(xiàng)目

使用 typescript 模板來(lái)創(chuàng)建項(xiàng)目，以獲得更好的類型提示。

create-react-app react-wasm --template typescript

進(jìn)入到剛創(chuàng)建好的項(xiàng)目目錄中

cd react-wasm

創(chuàng)建好 react 項(xiàng)目之后，我們接下來(lái)使用 wasm-pack 創(chuàng)建一個(gè) wasm 工具庫(kù)

wasm-pack new wasm-lib

創(chuàng)建完成后我們的目錄結(jié)構(gòu)是像下面這樣子的，

src 目錄主要編寫前端應(yīng)用代碼

wasm-lib/src 目錄主要編寫 rust wasm 代碼

wasm-lib/src/lib.rs 目錄下，這里就是我們可以進(jìn)行編寫供前端調(diào)用的 WebAssembly 函數(shù)。這里默認(rèn)寫好了一個(gè) greet 函數(shù)，然后里面調(diào)用了 alert 彈框。接下來(lái)我們就去看看如何在前端中進(jìn)行使用這個(gè)函數(shù)。

mod utils;
use wasm_bindgen::prelude::*;
// 當(dāng) `wee_alloc` 特性開(kāi)啟的時(shí)候, 使用 `wee_alloc` 作為全局分配器
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet() {
    alert("Hello, wasm-lib!");
}

打包 wasm

在 package.json 文件中添加這一行代碼，然后我們就可以進(jìn)行打包了。

項(xiàng)目根目錄中運(yùn)行

npm run build:wasm

如果在 build 的過(guò)程卡住了，或者報(bào)錯(cuò)了?？梢韵葧簳r(shí)把代碼優(yōu)化給關(guān)閉掉

在 wasm-lib 目錄下的 Cargo.toml 配置文件中關(guān)掉 wasm-opt

打包完成后就能看到項(xiàng)目根目錄中出現(xiàn)了一個(gè) pkg 文件夾，這里面就是我們打包后的產(chǎn)物，前端可以進(jìn)行調(diào)用我們用 Rust 編寫的函數(shù)。

前端調(diào)用

我們有兩種方式去調(diào)用 pkg 目錄下的 wasm 函數(shù)：

一種是將 pkg 作為一個(gè) npm 包發(fā)布

cd wasm-lib
# 該命令可以把這個(gè)庫(kù)作為 npm 包發(fā)布到 npm 中，然后我們前端就正常的方式 npm install 就可以使用了
wasm-pack publish

另一種是先在本地進(jìn)行引用，根目錄下安裝

npm install ./pkg

然后 package.json 的依賴中增加了我們的本地庫(kù)：

{
  "name": "react-wasm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.2",
    "wasm-lib": "file:pkg", // ++++++++++++++++++++++++++++
    "web-vitals": "^2.1.4"
  },
  // ...
}

接下來(lái)就去我們的 App.tsx 中調(diào)用 greet 方法：

import React, { useEffect } from "react";
import init, { greet } from "wasm-lib";
import logo from "./logo.svg";
import "./App.css";
function App() {
  // +++++++++++++++++
  useEffect(() => {
    init().then(() => {
      greet();
    });
  }, []);
  return (
    <div className="App">
      ...
    </div>
  );
}
export default App;

然后開(kāi)始運(yùn)行我們的 react 應(yīng)用

npm run start

打開(kāi) localhost:3000 端口，可以看到我們調(diào)用 alert 方法成功咯~

使用 console.log

首先我們要安裝一下 web-sys 這個(gè)包，在 Cargo.toml 中加入

[dependencies]
wasm-bindgen = "0.2.63"
web-sys = { version = "0.3.57", features = ['console'] } # ++++++++

在這里我們開(kāi)啟了 console 這個(gè) feature， web-sys 還支持很多 feature，比如可以操作 DOM，調(diào)用前端原生 fetch API ，操作 Canvas ， WebGL 等等等。

Rust：

mod utils;
use web_sys::console;
use wasm_bindgen::prelude::*;
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
pub fn test_log(val: JsValue) {
    console::log_2(&"從JS端接受到數(shù)據(jù)".into(), &val);
}

JS：

import React, { useEffect } from "react";
import init, { test_log } from "wasm-lib";
import logo from "./logo.svg";
import "./App.css";
function App() {
  useEffect(() => {
    init().then(() => {
      test_log({ a: 1, b: 2, c: 3 });
    });
  }, []);
  return (
    <div className="App">
      ...
    </div>
  );
}
export default App;

打印結(jié)果：

總結(jié)

像一些復(fù)雜的計(jì)算，我們可以使用 WebAssembly 來(lái)進(jìn)行操作，比如上一篇。 WebAssembly 目前論開(kāi)發(fā)效率來(lái)說(shuō)個(gè)人感覺(jué)是不如原生 JS 的，稍微有點(diǎn)繁瑣，目前感覺(jué)它的應(yīng)用場(chǎng)景更多是在復(fù)雜性的計(jì)算領(lǐng)域，比如寫游戲、音視頻解析、加密解密、圖片解析等這種需要復(fù)雜計(jì)算的。這里只是提供一個(gè)基礎(chǔ)的小demo，讓大家對(duì)這個(gè)東西有一個(gè)感性的了解，更深入的東西就得后面用到的時(shí)候再去了解了。

最后這里放上官方參考文檔

以上就是WebAssembly增強(qiáng)前端應(yīng)用技巧詳解的詳細(xì)內(nèi)容，更多關(guān)于WebAssembly增強(qiáng)前端應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: