CDN分发静态资源是提升HTML页面全球访问速度最有效手段，核心是让资源“离用户更近”；应优先托管不常变、可复用的CSS、JS、图片、字体、图标及静态HTML，避免缓存动态接口或含用户状态内容。
直接用CDN分发静态资源，是提升HTML页面全球访问速度最有效、也最落地的手段。核心不是换服务器，而是让资源“离用户更近”。
哪些静态资源该走CDN？
优先交给CDN托管的资源，得满足两个条件：不常变、可复用。典型包括：
- CSS、JS文件（尤其是构建后带 contenthash 的版本，如
main.a1b2c3.js） - 图片（PNG、JPEG、WebP）、字体（WOFF2）、图标（SVG）
- 打包生成的 HTML 文件本身（适合内容更新不频繁的静态页）
别把动态接口（如 /api/user）或含用户状态的 HTML 直接缓存——容易返回过期数据。
怎么把资源真正“搬”到CDN上？
关键在路径和部署两步打通：
立即学习“前端免费学习笔记（深入）”；
- 构建时配置
publicPath指向 CDN 域名，比如 Webpack 中设output.publicPath: "https://cdn.example.com/" - HTML 中引用方式从
<script src="/js/app.js"></script>改为<script src="https://cdn.example.com/js/app.v2.8f3e1a.js"></script> - 把构建产物上传到对象存储（如 COS、OSS），再将该存储桶接入 CDN 加速域名
缓存策略怎么配才不踩坑？
缓存不是越久越好，而是按资源特性分级设置：
- 带哈希的 JS/CSS/图片：设
Cache-Control: public, immutable, max-age=31536000（1年），浏览器会永久缓存，靠 URL 变化触发更新 - HTML 文件：建议
max-age=300（5分钟）或禁用强缓存，配合 ETag 或 Last-Modified 验证 - 字体文件：可设 1年，但需注意 CORS 头（
Access-Control-Allow-Origin: *）否则可能加载失败
上线前必须验证的几件事
配置完别急着发布，快速确认：
- 用
curl -I https://cdn.example.com/js/app.js查看响应头中是否有Cache-Control和X-Cache: HIT（表示命中 CDN 缓存） - 在不同地区（如东京、法兰克福、圣保罗）用 WebPageTest 测 TTFB，目标应 ≤ 100ms
- 打开开发者工具 → Network 标签，检查资源请求的域名是否为 CDN 域名，协议是否为 HTTPS + HTTP/3
