更好的性能:Vue+WebAssembly

Vue & WebAssembly

引言

网页------虚拟世界中不可或缺的一环,自诞生之初就发挥了巨大的作用,传播知识,分享见闻......但不可否认的是,在浏览器性能饱受广大程序猿的诟病的今天,终于也要迎来属于它的自我变革,下面将要分享的是WebAssembly技术,并参照文档教程,通过一个使用Rust语言与Vue框架的示范项目介绍其开发流程。

对于网络平台而言,WebAssembly 具有巨大的意义------它提供了一条途径,以使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行。在这种情况下,以前无法以此方式运行的客户端软件都将可以运行在 Web 中。

👉参考文档

将Rust编译为WebAssembly

强烈建议提前学习Rust语言、FFI(Foreign Function Interface)以及Vue框架相关基础知识

使用命令cargo new --lib <ProjectName>在当前文件夹下创建名为ProjectName的目录,并在ProjectName目录内创建生成库文件的Rust项目,或使用cargo init --lib <ProjectName>在当前目录直接初始化Rust项目。

使用命令cargo install wasm-pack为你的Rust添加WebAssembly(以下统称wasm)支持,然后使用命令cargo add wasm-bindgen为你的Rust项目添加wasm外部函数链接支持。

打开Cargo.toml,添加 [lib] 项,crate-type 选择cdylib作为编译目标,最后应该像这样:

toml 复制代码
[package]
name = "ProjectName"
version = "0.1.0"
edition = "2021"

[dependencies]
wasm-bindgen = "YourVersion"

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

打开src/lib.rs,里面有Rust自动生成的测试代码,把它们替换成下面的代码:

rs 复制代码
extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

在这里,我们的目标是在网页上通过调用Rust提供的greet函数接口,间接地调用JS提供的alert函数接口。greet函数顾名思义,在传入的参数name前加上"Hello"并弹出提示窗进行问候。(有点脱裤子放屁的嫌疑) 属性 #[wasm_bindgen] 告诉了Rustc,wasm_bindgen知道如何链接这些函数,至于为何能够做到这种事,请自行查阅FFI有关资料。

然后通过命令wasm-pack build -scope <AccountName>构建wasm包,AccountName是你的npm账号。此时在pkg文件夹中有构建出来的ProjectName_bg.wasm文件,以及将其封装并暴露出greet接口的ProjectName.js文件,至于其内部究竟是如何实现的,这里就留给有心者深入探究。

(可选)在pkg目录下,通过命令npm publish --access=public将包发布到你的npm账号上。

在Vue中使用WebAssembly

通过命令npm create vue@latest创建一个新的Vue项目。然后通过命令npm install @YourAccount/ProjectName将你的wasm包导入到项目中。(或导入上面的本地wasm包)

需要注意的是,目前Vue框架所使用的Vite构建工具不支持ESM集成提案,因此不能直接使用wasm包暴露出的接口,还需要通过社区贡献的vite-plugin-wasm 插件提供支持:通过命令npm install vite-plugin-wasm安装插件,然后编辑Vite项目配置文件vite.config.js来使用插件:

js 复制代码
import wasmPlugin from 'vite-plugin-wasm';
export default defineConfig({
    plugins: [
        wasmPlugin()
    ],
    //...
});

有关于vite-plugin-wasm 插件及其兼容性的更多信息,请自行查阅官方仓库

在任意组件中导入wasm包暴露的greet函数接口:

vue 复制代码
<script setup>
// 导入greet函数接口
import { greet } from '@YourAccount/ProjectName'
</script>

<script>
export default {
  mounted() {
    // 在组件挂载完成后立即进行问候
    greet("WebAssembly");
  }
}
</script>

<template>
    <!-- ... -->
</template>

最后通过命令npm run dev来查看你的第一个wasm+vue项目!

前端与后端的界线在这一刻再次变得模糊不清,这是否给你带来一些思考与启发呢?

- fin -

相关推荐
熊的猫37 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫8 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子10 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享10 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果11 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄11 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰12 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式