2026 OpenClaw フロント実戦:
リモート Mac で import グラフと tree-shaking を解析し PR 可読要約を返す HowTo
レビュアーは stats.json より重い部分グラフの起点と新規警告を短く知りたいです。リモート Mac と OpenClaw で bundle_graph.json → pr_bundle_graph_summary.md を PR/Webhook へ。併読:閾値要約、ソースマップ、キャッシュ。
- ログのみ:差分が見えない。
- 絶対パス:
/Users/…が PR に残る。 - 環境ズレ:解析だけ Node/バンドラが古い。
01 環境準備
CI と同系 Node・ロックに合わせ、jq 等は巨大 stats 用に。OpenClaw 出力は .openclaw/reports/<git-sha>/ のみ、.gitignore 済み。NODE_ENV=production と baseline.json(main SHA+成果物)で親推測を避けます。
再現五手順
- クリーンインストール一回。
README.openclaw.mdに--json等の invoker を固定。- 解析キャッシュを本番ジョブと分離。
raw/に生ファイル保存後に変換。bundle_graph.jsonのスキーマ版とキー名を固定。
02 ビルド成果物の解析フロー
本番ビルドから構造化データを取得:webpack 系 stats.json、Vite 系はプラグイン JSON、Rspack/Rolldown は module reasons。
| 系統 | 成果物 | 要点 |
|---|---|---|
| webpack/Rspack | stats 相当 | chunk・module id・理由をエッジ化。不要プロファイルは削除。 |
| Vite/Rollup | JSON 可視化出力 | entryId で混線防止。 |
| 巨大モノレポ | フル+剪定 | diff パッケージだけ OpenClaw 入力へ。 |
正規化例
schema・gitSha・edges・warnings。スタックは ソースマップ と併用。
解決不能 id や警告上限超過は非ゼロ終了。巨大 JSON はストリーム前提。
03 要約テンプレート
pr_bundle_graph_summary.md は見出し固定:指紋、上位 importer 五件、警告(相対パス)、ベースライン差分、フォローアップ一つ。長表は成果物 URL へ。数値は 閾値記事 に一本化。
04 CI/PR コメント連携の考え方
同一 SHA で checkout と dist/ を結ぶ。GitHub は YAML 明示の GITHUB_TOKEN、横断は fine-grained PAT。先頭に <!-- openclaw-bundle-graph:$SHA --> で冪等。Webhook は JSON+429 キュー。
05 権限とタイムアウト
Webhook は環境変数・ローテ可。トークンは PR 読書き+必要なら Contents 読取のみ。受信 HTTP は TLS・HMAC・レート制限。ビルド/パースは timeout で二十〜四十分目安、RAM 逼迫時は当該ジョブだけ並列を下げる。
- 機密は PR 本文に載せない。
- 冪等マーカーで二重投稿防止。
- 403/429 は PAT 期限・SSO・フォーク権限を確認。
06 FAQ
Q. グラフと実行時読込が違う? A. コンパイル時の包含関係です。コード分割や遅延ルートは計測と併読してください。
Q. 警告は増えたがサイズは変わらない? A. 閾値ゲートは バンドル閾値記事 に寄せ、警告はトリアージ信号として扱います。
Q. 403 on GitHub? A. 期限切れ PAT、組織 SSO、フォークへの bot コメント可否を順に切り分けます。
bundle_graph.json とスロット型 Markdown で PR 可読性を上げ、SHA 冪等と最小権限で閉じる。リモート Mac は長ビルド・巨大 JSON・WebKit 近傍検証に向くホストです。