静态资源优化
静态资源就是网站的基础设施，没有它们，网页也就像“无水之船”。但越基础，越容易被忽略，也越有优化的潜力。你可曾想过，那些看似简单的图片、字体和代码，其实藏着许多提升性能的小秘密？让我们来揭开静态资源优化的面纱。
目录
1. Web 图片：让视觉体验轻盈飞跃
选对格式是第一步
每种图片格式都有自己的特长，就像兵器谱里的各种武器：
- JPEG：体积小但损失些许细节，适合复杂色彩的照片。
- PNG：无损压缩，能处理透明背景，适合图标或细节丰富的图片。
- WebP：压缩效率高，比 JPEG 体积小 25%-35%，适合现代浏览器。
- SVG：基于矢量，缩放不失真，特别适合 Logo 和插图。
懒加载，按需加载才是王道
“用户看不到，我就不加载。”听起来很不讲武德，但懒加载就是这么直接有效。通过 IntersectionObserver，只在图片进入视窗时才加载，既减少初始加载时间，又能节省用户的流量。
压缩图片，瘦身效果看得见
不要轻视那几个 KB 的差距，图片压缩工具（如 ImageOptim、TinyPNG）能让图片大小减半甚至更多，而画质几乎无感降低。
2. Web 字体：让文字也轻装上阵
子集化加载
整个字体文件几十 KB，但页面可能只用到其中几个字母或汉字。生成字体子集，让浏览器只加载必需的部分，何乐而不为？
选择现代字体格式
WOFF2 是“新时代的字库”，既兼容性好又压缩率高，简直完美。
避免首屏“空白尴尬”
当字体加载时间过长时，“font-display: swap” 可以让系统字体暂时顶上，避免出现看不到文字的状况。
3. 代码压缩：刀刃向内，精简代码
HTML、CSS 和 JS 压缩
通过工具如 Terser 和 CSSNano，把代码中的空格、注释、冗余全都干掉，只留下浏览器需要的精华部分。
Tree Shaking，摇掉没用的代码
现代框架（如 Webpack 和 Rollup）会自动识别未被引用的模块，把它们摇下树，留下轻量的代码核心。
4. 分包策略：模块化加载，按需分发
动态导入
页面不需要的代码，为什么非要一次性全加载？使用动态导入，让代码像“外卖”一样，用户点到哪就送到哪。
第三方库分离
React、Lodash 这些常用的库，几乎所有项目都离不开。将它们单独打包，浏览器会缓存这些“不变的常青树”，减少每次加载的重复工作。
5. 缓存策略：让资源“常驻记忆”
设置合理的缓存头
通过 Cache-Control 和 Expires，告诉浏览器“这些文件可以一直用，不用每次都重新下载”。
Service Workers 的魔法
Service Workers 不仅能缓存静态资源，还能让网站离线访问。它像一个“缓存代理”，可以让资源更新与缓存共存。
版本控制，防止旧资源作祟
在文件名中加入哈希值，如 app.abc123.js，文件更新时哈希值也变，浏览器再也不会误用旧资源了。
静态资源优化不仅是技术活，更是一种哲学——让网页每一帧都快速、优雅、简单。优化做得好，你的用户不会察觉“优化”本身，而只会感受到“顺畅”。像风一样的体验，才是最顶级的享受。