CDN 的工作原理是什么？前端如何利用 CDN 优化？

用户请求 cdn.example.com/image.jpg
  → DNS 解析：返回最近的 CDN 边缘节点 IP
  → 用户请求边缘节点
  → 边缘节点有缓存？→ 直接返回（缓存命中）
  → 无缓存 → 回源站获取 → 缓存并返回

普通 DNS：
  example.com → 固定 IP

CDN DNS：
  cdn.example.com → CNAME → xxx.cdn-provider.net
  → 根据用户 IP 返回最近的边缘节点 IP
  
  北京用户 → 北京节点 IP
  广州用户 → 广州节点 IP
  美国用户 → 美国节点 IP

# 静态资源（JS/CSS/图片）
Cache-Control: public, max-age=31536000, immutable
# 内容变化时文件名变（哈希），所以可以长期缓存

# HTML
Cache-Control: no-cache
# 每次回源验证

# API 响应
Cache-Control: private, no-cache
# 不经过 CDN 缓存

// Vite 配置
export default {
  base: 'https://cdn.example.com/assets/'
  // 所有资源路径前缀变为 CDN 地址
}

// HTML 引用
<script src="https://cdn.example.com/assets/app.a1b2c3.js"></script>

<!-- 使用公共 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

// Vite 配置：不打包 vue/react，使用 CDN
export default {
  build: {
    rollupOptions: {
      external: ['vue', 'vue-router']
    }
  }
}

// HTML 中引入 CDN
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

<!-- 图片 CDN + 响应式 -->
<img 
  src="https://imgcdn.example.com/photo.jpg?w=800"
  srcset="https://imgcdn.example.com/photo.jpg?w=400 400w,
          https://imgcdn.example.com/photo.jpg?w=800 800w"
/>

边缘节点 → 源站（你的服务器/OSS）