game of life

起因

大一的时候做某次课程作业，我的选题就是 life of game。从那时候就想自己实现一个。但一直搁置着没有动手，最近在学 Rust，并正好看到了篇很不错的教程。这便是这个项目的起因。

历程

前期准备

我使用的环境是 vecode+wsl2。整体下来除了因为机器性能限制导致内存占用过高，体验还是很可以的。

但在搭建项目环境时踩了三个坑。

npm install 失败

解决：在 Ubuntu 中安装 npm

参考：WSL 无法使用 npm

wasm-build 失败

解决
Copy
[package.metadata.wasm-pack.profile.release]
wasm-opt = false

参考：failed to download binaryen-version_90-x86-windows.tar.gz

wasm-pack test --chrome --headless 失败

解决：改用wasm-pack test --chrome

参考： Headless Chrome test fails

编码

编码阶段跟着教程来，还算顺利。但教程中的代码是全部堆放在一起的。这看起来不太舒服，也不太适合我后续的迭代。我花了些时间将其组件化。但教程的后面也有说明没有组件化的理由：Shrinking .wasm Size。这让我意识到还是要根据项目的特点来去做对应的优化和修改。

部署

开发时，我发现shalzz/wasm-game-of-life提供了一个 live demo。是使用 vercel 进行部署的。vercel 之前我也有使用过，但只是用的别人的一键部署。我觉得蛮有意思的，于是决定也试试。着实花了些时间，踩了不少坑。这里展开说下过程。

一开始参考Deploying a WASM-Powered React App on Vercel。后来发现不需要这么麻烦，因为我已经wasm-pack pulish了，可以直接将wasm-game-of-life-euds63 - npm作为依赖引入。这样就只需要部署 webpack，而不用再去安装 Rust 相关的内容。

对代码进行对应的修改后。我开始尝试部署。先是遇到路径问题，我将Root Directory修改为 www。

这时候 vercel 显示部署成功了，但实际上是运行不了的。我因着之前的经验，惯性地以为也是路径问题。开始修改其他地方的路径。但实际上不是。反复修改几次后我发现：错误的路径会导致部署成功，而正确的路径反而会使npm install报错。而我一开始以为的错误路径是正确的。 这一步我觉得还是我没有好好去看 log 导致的。

根据相应的报错发现是 node 版本问题。我本地运行成功的 node 版本是 12，而 vercel 只支持 18 和 16，我一开始的想法是另外安装一个 12 的版本，未果。后来报着试一试的念头改为 16，惊喜的是npm install成功了。

npm run build后报错：Missing Public Directory。根据Error List | Vercel Docs尝试将Output Directory设为 dist，解决。

配置域名

我使用了子域名的方式进行配置。之前觉得配置子域名蛮神奇的。自己尝试后发现，似乎是相当于一个 redirect？

我先在我使用的 DNS 服务提供商处添加了一条 CNAME 记录。

SUBDOMAIN | TYPE | VALUE | TTL, SEC
lifegame | CNAME | game-of-life-2hpx.vercel.app | 86400

然后在 vercel 的对应项目中的 Domains 新增域名 lifegame.ds63.eu.org。

一开始设置好的是没有 ssl 证书。网上查了些资料，发现 vercel 是会自动提供 ssl 证书的。还以为是自己哪里设置出问题了。结果是得等一会儿才行。

收获

Rust 自定义宏

步骤

在一个模块中定义并导出自定义宏
Copy
// utils.rs
#[macro_export]
macro_rules! log {
( $( $t:tt )* ) => {
web_sys::console::log_1(&format!( $( $t )* ).into());
}
}

在其他模块中使用
Copy
// lib.rs
#[macro_use]
mod utils;

mod universe;

// universe.rs
use crate::utils;
// 直接使用
log!("This is a log message: {}", some_variable);

Always let profiling guide your focus

一些检测性能工具

edge 开发者工具 -> 性能

cargo benchcmp

perf

Time Profiling - Rust and WebAssembly这章值得再读几次

vercel 部署

参考

Rust and WebAssembly

Play John Conway’s Game of Life 目前发现的最好的一个 game of life 实现

shalzz/wasm-game-of-life: Game of Life implementation using Rust, Javascript and WebAssembly!

Projects Overview | Vercel Docs