什么是静态资源？
打开一个网页，除了动态内容，比如评论、用户信息这些需要实时生成的内容外，还有很多不会频繁变动的文件——比如图片、CSS 样式表、JavaScript 脚本、字体文件等。这些就是所谓的“静态资源”。
虽然它们不常变，但加载速度直接影响用户体验。你有没有遇到过点开一个网页，文字都出来了，但图片还在转圈？或者按钮点了没反应，等了几秒脚本才加载完？这多半是静态资源拖了后腿。
为什么部署方式很重要
很多人以为只要代码写得好就行，其实部署方式同样关键。同一个 JS 文件，放在不同的地方，加载速度可能差好几倍。
比如你把所有静态文件直接放在网站主服务器上，每次访问都要经过应用逻辑处理，哪怕只是取一张图。这就像让厨师去门口发传单——效率低还占用工位。
用 CDN 加速分发
最直接的办法是把静态资源扔到 CDN（内容分发网络）上。CDN 是遍布全国甚至全球的服务器节点，用户访问时会自动从离他最近的节点拉取资源。
举个例子：你的服务器在北京，广东用户访问时延迟高。用了 CDN 后，广东用户的请求会被分配到广州的节点，图片、JS 几百毫秒就加载完了。
主流云服务商都有 CDN 服务，配置也很简单，通常只需要改一下域名解析，再把静态文件同步过去就行。
开启 Gzip 压缩
文本类资源比如 JS、CSS、HTML，压缩后体积能减少 60% 以上。Gzip 是最常用的压缩方式，大多数服务器都支持。
Nginx 配置示例：
gzip on;
gzip_types text/css application/javascript application/json;注意别对图片、视频这些本身已压缩的文件再开 Gzip，浪费 CPU 还没啥效果。
设置长期缓存策略
浏览器可以缓存静态资源，避免重复下载。但默认行为往往不够聪明。你需要明确告诉浏览器：“这个文件一年内都不会变，放心缓存”。
通过设置 HTTP 头部实现：
Cache-Control: max-age=31536000, immutable这样用户第二次访问时，浏览器直接从本地读取，几乎零等待。注意：带版本号或哈希值的文件名才适合长期缓存，比如 app.abc123.js，更新后文件名变了，自然触发重新下载。
合并与按需加载
以前流行把所有 JS 合并成一个大文件，减少请求数。但现在更推荐按需加载（lazy load）。比如轮播图的脚本，等页面主体内容加载完再加载；长页面的图片，等用户滚动到附近再加载。
图片懒加载示例：
<img data-src="image.jpg" class="lazy" alt="">配合 JavaScript 在滚动时替换 data-src 到 src，就能实现延迟加载。
使用 WebP 格式图片
同样的清晰度，WebP 比 JPEG 小 30%，比 PNG 小更多。现代浏览器基本都支持了。
你可以保留原图，同时生成一份 WebP 版本，用 picture 标签兼容处理：
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="风景照">
</picture>不支持 WebP 的浏览器会自动降级使用 JPG。
小改动，大提升
静态资源优化不像重构代码那样显眼，但它带来的加载速度提升是实打实的。用户不会夸你用了 CDN，但他们能感觉到“这个站真快”。在网速越来越快的今天，谁先加载出来，谁就更容易留住注意力。