腳本之家服務器常用軟件

快捷導航

WebAssembly增強前端應用技巧詳解

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

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

準備

此篇文章我們主要使用 Rust 來編寫我們的 WebAssembly 工具庫然后在 React 應用進行使用。所以需要準備好下列的環(huán)境

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

開始

開始前我們先要準備一個前端應用，這里我們使用 create-react-app 來創(chuàng)建一個 React 項目。如果沒有安裝 create-react-app ，先用 pnpm (npm / yarn 也行)全局安裝一下

npm install -g create-react-app

創(chuàng)建項目

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

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

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

cd react-wasm

創(chuàng)建好 react 項目之后，我們接下來使用 wasm-pack 創(chuàng)建一個 wasm 工具庫

wasm-pack new wasm-lib

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

src 目錄主要編寫前端應用代碼

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

wasm-lib/src/lib.rs 目錄下，這里就是我們可以進行編寫供前端調用的 WebAssembly 函數。這里默認寫好了一個 greet 函數，然后里面調用了 alert 彈框。接下來我們就去看看如何在前端中進行使用這個函數。

mod utils;
use wasm_bindgen::prelude::*;
// 當 `wee_alloc` 特性開啟的時候, 使用 `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 文件中添加這一行代碼，然后我們就可以進行打包了。

項目根目錄中運行

npm run build:wasm

如果在 build 的過程卡住了，或者報錯了?？梢韵葧簳r把代碼優(yōu)化給關閉掉

在 wasm-lib 目錄下的 Cargo.toml 配置文件中關掉 wasm-opt

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

前端調用

我們有兩種方式去調用 pkg 目錄下的 wasm 函數：

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

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

另一種是先在本地進行引用，根目錄下安裝

npm install ./pkg

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

{
  "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"
  },
  // ...
}

接下來就去我們的 App.tsx 中調用 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;

然后開始運行我們的 react 應用

npm run start

打開 localhost:3000 端口，可以看到我們調用 alert 方法成功咯~

使用 console.log

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

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

在這里我們開啟了 console 這個 feature， web-sys 還支持很多 feature，比如可以操作 DOM，調用前端原生 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端接受到數據".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;

打印結果：

總結

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

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

以上就是WebAssembly增強前端應用技巧詳解的詳細內容，更多關于WebAssembly增強前端應用的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: