前端性能优化

构建体积

• 路由懒加载：将不同路由拆成独立 chunk，需要时再加载。
• Tree Shaking：在 ES Module 基础上移除未使用代码；引入 Lodash 等库时只引入实际使用的模块。
• 代码分割：将第三方库等内容拆成独立 chunk，利用浏览器缓存。
• 多目标打包：针对不同浏览器生成不同兼容版本，减少不必要的兼容代码。
• 压缩和混淆：缩小最终资源体积。

网络传输

• CDN：缩短静态资源访问距离，公共库还可能利用跨站缓存。
• 压缩：服务器压缩资源，只要解压成本小于节省的传输时间就有收益。
• 缓存：除 HTML 外的资源可配合文件 Hash 使用强缓存或协商缓存。
• HTTP/2：利用多路复用和头部压缩提高连接利用率。
• 资源提示：preload 预加载当前页面关键资源，prefetch 在空闲时获取后续页面可能使用的资源，preconnect 提前连接第三方域名。
• 静态资源域：在不支持 HTTP/2 的场景下，把资源分散到多个域以增加并行 TCP 连接。

渲染与体验

• 优化关键渲染路径。
• 图片懒加载，并使用 WebP 等体积更小的格式。
• 使用骨架屏降低用户等待时的焦虑。
• 将多张小图合并为雪碧图。
• 使用 defer、async 调整脚本加载和执行时机。

运行时

• 长列表使用虚拟滚动。
• 高频事件使用防抖或节流。
• 计算密集型任务可使用 Web Worker，避免阻塞主线程。

原始笔记中的“页面首屏加载时间优化”和“网络性能优化”内容高度重复，本文件按构建、网络、渲染和运行时四类合并。