如何使用 Wasm 和 Rust 服务多个 HTML 页面？

Posted 2023-03-29

【中文标题】如何使用 Wasm 和 Rust 服务多个 HTML 页面？

【英文标题】：How to serve multiple HTML pages using Wasm with Rust?

【发布时间】：2020-07-10 01:43:17

【问题描述】：

我正在尝试构建一个在客户端运行 wasm 的 Web 应用程序，我想知道什么是服务多个页面的好方法。 我主要关心的是性能，因为我想将应用程序拆分为上下文块，而不是让一个页面包含所有内容。

我在客户端使用带有Yew framework 的Rust，到目前为止，我只使用yew_router 来处理客户端的不同路由，但它们都在同一个html 页面和Wasm 模块中工作。现在我希望能够使用单独的 Wasm 模块为不同的 HTML 页面提供服务，但我不确定如何实现这一点。我真的必须为每个页面编写一个专用的 crate 并将它们编译为单独的 Wasm 模块，以便我可以单独为它们提供服务吗？或者有什么方法可以将一个 rust crate 编译成多个 Wasm 模块？

我目前的项目结构是这样的：

.
├── Cargo.toml // workspace manifest
├── client
│   ├── Cargo.toml
│   ├── favicon.ico
│   ├── index.html
│   ├── main.js
│   ├── Makefile
│   ├── pkg // built using wasm-pack and rollup
│   │  ├── bundle.js
│   │  ├── client_bg.d.ts
│   │  ├── client_bg.wasm
│   │  ├── client.d.ts
│   │  ├── client.js
│   │  ├── package.json
│   │  └── snippets
│   ├── src
│   ├── statics
│   ├── styles
│   └── vendor
├── server
│   ├── Cargo.toml
│   └── src
└── ... other crates

我在 client/ 内运行服务器，它以 index.html 响应任何传入的 GET 请求。 index.html 链接到 pkg/ 中的 bundle.js，它设置了 client_bg.wasm 模块。

现在我基本上想用另一个 HTML 页面和另一个 Wasm 模块执行此操作，最好来自 client crate 中的同一个 Yew 应用程序。

谢谢

【问题讨论】：

通过将客户端代码拆分为多个 crate 可以正常工作。只需对构建系统进行一些修改即可设置所有内容。

【参考方案1】：

目前不可能从一个 crate 生成两个 wasm 文件。解决方案是使用每个 wasm 文件创建一个，然后让另一个构建系统将输出放置到正确的位置。