效能預算
免費線上效能預算追蹤工具,監控資源大小
什麼是效能預算?
效能預算為 Web 資源(JavaScript 包、圖片、字型、CSS)的大小和載入時間設定限制。追蹤這些預算有助於防止專案增長過程中的效能退化。常見的預算包括總頁面大小不超過 1MB,JavaScript 不超過 200KB。
如何追蹤資源預算
新增資源及其實際大小並設定預算限制。工具追蹤總大小並標記任何超出預算的資源。在開發過程中使用此工具及早發現效能問題。
▶什麼是好的效能預算?
常見建議:總頁面大小 < 1MB、JavaScript < 200KB(壓縮後)、CSS < 50KB、圖片 < 500KB、3G 網路下可互動時間 < 5 秒。
▶如何測量實際資源大小?
使用 Chrome DevTools 網路面板查看傳輸大小。對於打包應用,使用 webpack-bundle-analyzer 或類似工具檢查包的組成。