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

相关推荐
三原2 小时前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
DC...2 小时前
vue滑块组件设计与实现
前端·javascript·vue.js
H5开发新纪元3 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js
吃面必吃蒜4 小时前
从 Vue 到 React:React 合成事件
javascript·vue.js·react.js
前端练习生4 小时前
vue2如何二次封装表单控件如input, select等
前端·javascript·vue.js
不爱说话郭德纲4 小时前
Vue scoped都用过吧,它是怎么实现样式隔离的?React又是怎么实现的
前端·javascript·vue.js
OpenTiny社区4 小时前
直播预告|TinyVue 组件库高级用法:定制你的企业级UI体系
前端·vue.js·开源
Cyann5 小时前
vue3实战项目第一日(学习项目):封装svg全局组件
vue.js
2501_915373885 小时前
vue之事件绑定
前端·javascript·vue.js
程序猿chen5 小时前
量子跃迁:Vue组件安全工程的基因重组与生态免疫(完全体终局篇)
前端·vue.js·git·安全·面试·前端框架·跳槽