2026 OpenClaw Web 實戰：
遠端 Mac 上 Storybook 建置與靜態資源體積閾值巡檢
前端工程與發布負責人需要可重跑的 Storybook 流水線，在靜態資源膨脹進線上前攔截。本篇 HowTo：遠端 Mac 安裝建置、僅掃產物目錄規則、閾值表、超閾告警與 CI 預檢順序，附錯誤與日誌。延伸：技術見解、冒煙與預部署、package.json 預檢；連線見幫助中心。💻🚀
01 為何 Storybook 靜態產物需要發布巡檢
設計系統與元件庫常以靜態站內部分享，但易累積肥大 chunk、重複圖示與誤引入整庫。
- 無感膨脹：每週合併疊加千位元組，弱網讀者首屏變慢。
- 掃描範圍錯：指到儲存庫根易含 node_modules，掩蓋真回歸。
- 責任切割：若無版本化的 warn／fail，設計與應用團隊難對齊預算。
02 遠端 Mac、筆電與僅 Linux CI 的取捨
Linux CI 負責高頻回饋；遠端 Mac 適合對齊設計環境、Safari 周邊與長時 OpenClaw。Storybook 包 Vite／Webpack 時見建置快取文。
| 關注點 | 遠端 Mac 閘道 | 開發者筆電 | 僅 Linux CI |
|---|---|---|---|
| 一致性 | 固定映像與共用憑證 | 易隨本機微調漂移 | lint／單元強 |
| Safari／macOS 鄰近 | 原生堆疊 | 視執行者而定 | 無真 Safari |
| OpenClaw 自動化 | SSH 或代理常駐 | 打斷人工工作 | 可行但缺 macOS 對等 |
03 靜態資源閾值表（起始值）
下列為範例，請以團隊 baseline 提交 JSON／YAML 與掃描腳本同庫，變更如程式碼審閱。
| 範圍 | 典型 glob | Warn | Fail（發布） |
|---|---|---|---|
| 靜態輸出總量 | storybook-static/** |
大於 90 MB | 大於 120 MB |
| 單一 JS bundle | **/*.js |
大於 800 KB | 大於 1.5 MB |
| Source map | **/*.map |
僅報表 | 正式託管仍含 map |
| 字型 | **/*.woff2 |
大於 350 KB | 大於 600 KB |
| 點陣圖 | **/*.{png,jpg,jpeg,webp} |
大於 500 KB | 大於 1.2 MB |
04 建置、掃描、告警與 CI 預檢順序
於遠端 Mac 乾淨工作樹執行；本機除錯應使用同一腳本。
- 安裝：使用 pnpm 時先
corepack enable，再pnpm install --frozen-lockfile或npm ci；釘選 Node 與 Storybook 版號。 - 建置：
pnpm exec build-storybook -o storybook-static或npm run build-storybook；掃描前確認storybook-static/index.html。 - 掃描規則：只走產物目錄；
sb-addons若為固定廠商可白名單；依副檔名或 MIME 分帳。 - 超閾：fail 層級非零退出；warn 可寫 JSON 仍通過；報告檔名含分支與短 SHA。
- OpenClaw：失敗步驟帶報告路徑；stdout 勿印 token；敏感欄位遮罩。
- CI 預檢鏈：lint → 單元測試 → 正式產物建置 → Storybook → 體積閘道 → 選配冒煙。
pnpm install --frozen-lockfile && pnpm run build-storybook && node scripts/scan-storybook-static.mjs --root storybook-static --config size-gates.json
05 常見錯誤與日誌定位
Webpack／Vite 記憶體不足：大型設計系統設 NODE_OPTIONS=--max-old-space-size=8192；先看 job 主控台再對堆疊。
輸出路徑不符：Storybook 7+ 遵守 -o 與 main 的 outputDir；零檔案時查文件中的輸出路徑。
總量被 map 拉高：對外 gate 忽略 *.map 或另建內部 profile。
SSH／OpenClaw 斷線：查 ~/.openclaw/logs 或編排器執行頁時間戳與步驟 ID。
- 閾值檔與腳本同庫版本化。
- 工件保留七至十四日便於跨版 diff。
- warn 與 fail 分離以降低告警疲勞。
06 FAQ
體積閘道應掃描哪個資料夾？僅 storybook-static 等靜態輸出；勿以根目錄為根而未排除 node_modules。
source map 是否計入正式上限？建議獨立策略：對外託管剔除 map，或對 .map 單獨 fail。
為何加遠端 Mac？貼近設計與 Safari 檢查；Linux 求量、Mac 補巡檢。
釘死安裝與建置、只掃 storybook-static、以閾值表做 CI 門檻，並讓 OpenClaw 在超閾時帶報告通知。遠端 Mac讓此管線可常駐執行，服務在意靜態資源與發布巡檢的團隊。