静态资源优化
静态资源是网站的基础设施,它们的优化潜力往往被低估。图片、字体、代码等看似简单的资源,实际上蕴含着大量提升性能的机会。本章将系统介绍静态资源优化的核心策略和最佳实践。
目录
1. Web 图片:让视觉体验轻盈高效
选对格式是第一步
不同的图片格式有各自的优势和适用场景:
- JPEG:体积小但会损失部分细节,适合复杂色彩的照片。
- PNG:无损压缩,能处理透明背景,适合图标或细节丰富的图片。
- WebP:压缩效率高,比 JPEG 体积小 25%-35%,适合现代浏览器。
- SVG:基于矢量,缩放不失真,特别适合 Logo 和图标。
懒加载:按需加载策略
懒加载的核心思想是只在用户需要时才加载资源。通过 IntersectionObserver,当图片进入视窗时才开始加载,既减少初始加载时间,又能节省用户流量。
压缩图片:在体积和质量间取得平衡
图片压缩工具(如 ImageOptim、TinyPNG)能显著减小文件大小,同时保持视觉质量。合理的压缩策略可以让图片体积减半,而画质降低几乎无法察觉。
2. Web 字体:让文字加载更高效
子集化加载
完整的字体文件可能包含数千个字符,但页面往往只使用其中一小部分。通过生成字体子集,只加载必需的字符,可以大幅减小文件体积。
选择现代字体格式
WOFF2 是当前最优的字体格式,兼容性好且压缩率高,是字体优化的首选方案。
避免首屏空白
当字体加载时间较长时,使用 font-display: swap 可以让系统字体暂时显示文本,避免用户看到空白内容,提升用户体验。
3. 代码压缩:精简代码体积
HTML、CSS 和 JavaScript 压缩
通过工具如 Terser 和 CSSNano,可以移除代码中的空格、注释和冗余内容,只保留浏览器执行所需的核心代码。
Tree Shaking:移除未使用的代码
现代构建工具(如 Webpack 和 Rollup)会自动识别未被引用的模块,将其从最终打包文件中移除,保持代码的精简。
4. 分包策略:模块化加载
动态导入
页面不需要的代码无需一次性全部加载。使用动态导入,让代码按需加载,用户访问到相应功能时才下载对应模块。
第三方库分离
React、Lodash 等常用库在多个项目中都会使用。将它们单独打包,浏览器可以缓存这些稳定的依赖库,减少重复加载。
5. 缓存策略:让资源持久可用
设置合理的缓存头
通过 Cache-Control 和 Expires,可以告诉浏览器哪些资源可以长期缓存,避免每次访问都重新下载。
Service Workers:离线缓存能力
Service Workers 不仅能缓存静态资源,还能实现离线访问。它像一个缓存代理,可以让资源更新与缓存并存,提供更灵活的缓存控制。
版本控制:防止缓存问题
在文件名中加入哈希值,如 app.abc123.js,当文件更新时哈希值也会改变,浏览器会自动下载新版本,避免使用过期的缓存资源。
总结
静态资源优化不仅是技术实现,更是一种系统性的思考方式。通过合理的格式选择、加载策略、压缩方案和缓存机制,可以让网页的每一帧都快速流畅。优化做得好,用户感受到的不是优化本身,而是无缝顺畅的使用体验。