性能预算
免费在线性能预算跟踪工具,监控资源大小
什么是性能预算?
性能预算为 Web 资源(JavaScript 包、图片、字体、CSS)的大小和加载时间设定限制。跟踪这些预算有助于防止项目增长过程中的性能退化。常见的预算包括总页面大小不超过 1MB,JavaScript 不超过 200KB。
如何跟踪资源预算
添加资源及其实际大小并设置预算限制。工具跟踪总大小并标记任何超出预算的资源。在开发过程中使用此工具及早发现性能问题。
▶什么是好的性能预算?
常见建议:总页面大小 < 1MB、JavaScript < 200KB(压缩后)、CSS < 50KB、图片 < 500KB、3G 网络下可交互时间 < 5 秒。
▶如何测量实际资源大小?
使用 Chrome DevTools 网络面板查看传输大小。对于打包应用,使用 webpack-bundle-analyzer 或类似工具检查包的组成。