更好的性能: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 -

相关推荐
木子020439 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
运维-大白同学1 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
星星会笑滴3 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish3 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫5413 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.3 小时前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普3 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King3 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
景天科技苑4 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星1254 小时前
前端预览pdf文件流
前端·javascript·vue.js