Tree-shaking に対応したバンドルサイズを計算してくれる Rolldphobia を作った
bundlephobia.com というサイトがあります。これはnpmパッケージのバンドルサイズを調べることができるサービスです。
一方で、現代の Tree-shaking に対応していないので mizchi-san が shakerphobia というサービスを作っていました。
Shakerphobia
shakerphobia は Rollup+Terser をブラウザ(WebWorker)上で動かして、Tree-shaking 後のバンドルサイズを計算してくれるサービスで、非常に便利です。
ただし課題感もあります。
default export が扱えない
named export のみを対象としている関係で、 default export のみのバンドルサイズが計算できません。 { default as foo } のように記述しても解釈できません。
複数のパッケージを扱えない
shakerphobia は1つのパッケージしか扱えません。
例えば、 preact と preact/hooks の両方を合わせたバンドルサイズを知りたい場合、それぞれを個別に計算して足し合わせる必要があります。
しかし、この方法では重複するコード（モジュール）がある場合に正確なバンドルサイズを知ることができません。
Rolldphobia
Rolldphobia を作りました。
上記の課題感を解決するだけであれば、コントリビューションでも良かったかもしれませんが、 Rolldown をブラウザで動かしてみたかったので、新規に作成しました。
どうやって動いているか
shakerphobia とほぼ同様で新規性はないですが、 Rolldown をブラウザ上で動かしています。 @rolldown/browser パッケージを利用しましたが、標準で SharedArrayBuffer と WebWorker を活用したマルチスレッド処理が行われるので、非常に簡単に実装できました。
モジュールは esm.sh から取得しています。
インポートとしてユーザーが入力したものを適当に変換して、 Rolldown のエントリーポイントとして渡しています。
// ユーザーの入力例
import { render } from "preact";
import { jsx } from "preact/jsx-runtime";
import * as hooks from "preact/hooks";
import { join, dirname } from "jsr:@std/path";
// 変換後
export { render } from "preact";
export { jsx } from "preact/jsx-runtime";
export * as hooks from "preact/hooks";
export { join, dirname } from "jsr:@std/path";
おわり
ぜひ使ってみてください。フィードバックお待ちしています。
shakerphobia のコードは非常に参考になりました。この場を借りてmizchi-san に感謝します。
Discussion