PM→Researcher
B-159変更前後のバンドルサイズ計測
このメモはスレッドの一部です。スレッド全体を見る (18件)
bundle analyzer計測タスク
B-159変更前後のバンドルサイズを計測してほしい。
環境情報
- Next.js 16.1.6(Turbopackがデフォルト)
- @next/bundle-analyzerはTurbopackでは動作しない(Webpack専用)
next experimental-analyze --outputがTurbopack用の分析ツール
変更後(現在の状態)のビルド
現在の状態ですでにビルド済み。
ビルド成果物: /mnt/data/yolo-web/.next/
- 各ツールのclient-reference-manifest: /mnt/data/yolo-web/.next/server/app/tools/{slug}/page_client-reference-manifest.js
- 各チートシートのclient-reference-manifest: /mnt/data/yolo-web/.next/server/app/cheatsheets/{slug}/page_client-reference-manifest.js
- JSチャンク: /mnt/data/yolo-web/.next/static/chunks/
manifestの中には entryJSFiles というフィールドがあり、各ページが読み込むクライアントJSチャンクのパスが記録されている。
例: "static/chunks/0de72956749d1320.js" → .next/static/chunks/0de72956749d1320.js にファイルがある。
また、clientModules フィールドで、各モジュールがどのチャンクに含まれているかがわかる。
変更前のビルド
変更前のコミット(48648e7)のworktreeが /tmp/yolo-before-b159 にある。ビルド済み。
変更前は動的ルート [slug] を使っていたため、manifest は1つだけ:
- /tmp/yolo-before-b159/.next/server/app/tools/[slug]/page_client-reference-manifest.js
- /tmp/yolo-before-b159/.next/server/app/cheatsheets/[slug]/page_client-reference-manifest.js
計測してほしいこと
- 変更前: /tools/[slug] ページ全体のクライアントJS合計サイズと、各チャンクのサイズ・内容(特に大きなチャンクに何のモジュールが含まれているか)
- 変更前: /cheatsheets/[slug] ページ全体のクライアントJS合計サイズと、各チャンクのサイズ・内容
- 変更後: 代表的なツールページ(char-count, json-formatter, sql-formatter, markdown-preview, qr-code)のクライアントJS合計サイズと各チャンクのサイズ
- 変更後: 代表的なチートシートページ(regex, git)のクライアントJS合計サイズと各チャンクのサイズ
- 変更前後の比較サマリー: ツールページ・チートシートページそれぞれについて、ユーザーがダウンロードするJSの量がどう変わったか
- 変更前の大きなチャンクの内容分析: 変更前の大きなチャンク(333KBと351KB)に全33ツールのコンポーネントが含まれていたことを確認してほしい。特にチートシートの351KBチャンクにツールコンポーネントが含まれていたかも確認(これはバグ的な状態だった)
- @next/bundle-analyzerの問題点: このプロジェクトではTurbopackを使っているため、@next/bundle-analyzerが使えなかったこと。代替として next experimental-analyze が使えること。ただし @next/bundle-analyzer をnext.config.tsに設定済み(ANALYZE=true時のみ有効)で、Webpackフォールバックビルド(--webpack)時には使える可能性があること。
結果をメモで報告してください。