wasmに入門してみる【8】

にあえん

August 18, 2023

今回で最後になります。

wasmのサイズを小さくする

いくつかの設定を追記することで、wasmのサイズを小さくすることができます。

Shrinking .wasm Size - Rust and WebAssembly

Rustのリリースビルドみたいなものですね。

まず必要なパッケージをインストールします。

cargo install wasm-opt

Cargo.tomlに設定を追記します。

[profile.release]
lto = true
opt-level = "z"

再ビルドする前に、一度どのくらいの大きさなのか見ておきましょう。

% wc -c pkg/wasm_game_of_life_bg.wasm
25136 pkg/wasm_game_of_life_bg.wasm

大体25KBくらいでした。

では先程インストールしたwasm-optで最適化していきます。

wasm-opt -Oz -o output.wasm pkg/wasm_game_of_life_bg.wasm

最適化できました。

% wc -c output.wasm                                        
24955 output.wasm

あんまり変わっていないですね。。

wasm-packでもビルドしてみて、wasmファイルに変化があるか確認してみます。

%wasm-pack build
[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...
   Compiling wasm-game-of-life v0.1.0 (/home/username/Project/personal/wasm-game-of-life)
warning: unused macro definition: `log`
  --> src/lib.rs:25:14
   |
25 | macro_rules! log {
   |              ^^^
   |
   = note: `#[warn(unused_macros)]` on by default

warning: `wasm-game-of-life` (lib) generated 1 warning
    Finished release [optimized] target(s) in 0.41s
[INFO]: ⬇️  Installing wasm-bindgen...
[INFO]: found wasm-opt at "/home/username/.cargo/bin/wasm-opt"
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: ✨   Done in 0.86s
[INFO]: 📦   Your wasm pkg is ready to publish at /home/username/Project/personal/wasm-game-of-life/pkg.

ビルドできたので確認します。

%wc -c pkg/wasm_game_of_life_bg.wasm                      
24620 pkg/wasm_game_of_life_bg.wasm

多少wasm-buildでやったほうが軽くなったけど、あんまり変わらないですね。

（チュートリアルでは10KBは軽くなってたのに…）

npmにパブリッシュする

wasm-packを使ってnpmにパッケージをパブリッシュすることができます。

まずはnpmアカウントにログインします。

wasm-pack login

上記のコマンドを打つと、ブラウザでログイン処理を行うように案内されます。

ログインができるとターミナル側でログインが完了となります。

ビルドができているのであれば、publishコマンドですぐパッケージを公開することができます。

wasm-pack publish

ただし、このチュートリアルパッケージは既に公開されているため、publishしても失敗します。

公開されているパッケージ名の重複は許されていないため、注意する必要があります。

（以下のエラーメッセージはこのチュートリアルパッケージを公開しようとしたときのメッセージです。）

npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/wasm-game-of-life - Package name too similar to existing package wasm_game_of_life; try renaming your package to 'username/wasm-game-of-life' and publishing with 'npm publish --access=public' instead

まとめ

結構長くチュートリアルをやりました。

チュートリアルはこれで終わったんですが、調べていて気になったビルド方法がありました。

今までのチュートリアルよりもっと原始的（？）なやり方です。

時間があればこれもやりたかったです。

まぁでもとりあえずこれでwasmの開発ができるようになった…と言っていいんじゃないかな。