React项目vendor需CDN预热，因其体积大、更新少，可提前推送到边缘节点避免首屏延迟和源站压力；需确认文件路径与哈希规则、配置Nginx缓存头、执行CDN预热并集成到CI/CD。
为什么 React 项目的 vendor 需要 CDN 预热
React 打包后生成的 vendor.xxx.js（或 vendor.chunk.js）通常包含第三方依赖（如 React、Redux、Lodash 等），体积大、更新频率低、缓存寿命长。若等用户首次访问时才触发 CDN 缓存回源，会带来明显首屏延迟和源站压力。CDN 预热就是提前将这些稳定资源主动推送到 CDN 边缘节点，让真实请求直接命中缓存，跳过回源。
确认 vendor 资源路径与指纹规则
先确保构建输出中 vendor 文件可被唯一识别。以 Create React App 或 Vite 为例：
- 检查
build/static/js/目录下是否存在带哈希的 vendor 文件（如2.9d8a3b4f.chunk.js或vendor.7c2a1e8d.js） - 查看
index.html中 script 标签是否引用了该文件（如<script src="/static/js/vendor.7c2a1e8d.js"></script>） - 确认 Nginx 的静态服务路径与 HTML 中的 publicPath 一致（例如都为
/或/assets/）
Nginx 配置 vendor 资源强制缓存 + CORS 支持
预热的前提是 CDN 能正确缓存并透传响应头。在 Nginx server 块中添加针对 vendor 的精细化缓存策略：
location ~ ^/static/js/vendor\.[a-f0-9]+\.(js|js.map)$ {
add_header Cache-Control "public, immutable, max-age=31536000";
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET";
expires 1y;
try_files $uri =404;
}
说明：
– immutable 告诉浏览器和 CDN：该资源内容永不变更，可长期缓存
– max-age=31536000（1年）配合文件名哈希，实现“内容不变则 URL 不变”
– Access-Control-Allow-Origin 为后续跨域预热请求（如用 curl 或脚本批量触发）提供支持
执行 CDN 预热（以阿里云 CDN 为例）
预热本质是向 CDN 边缘节点发起一次 GET 请求，使其主动回源拉取并缓存。可用以下任一方式：
-
控制台手动预热：登录 CDN 控制台 → “预热刷新” → 输入完整 vendor URL（如
https://cdn.example.com/static/js/vendor.7c2a1e8d.js）→ 提交 -
API 批量预热（推荐）：调用阿里云 OpenAPI
PushObjectCache，传入多个 vendor 地址数组；腾讯云用RefreshCdnOverseaUrl，Cloudflare 可用curl -X POST https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache -H "Content-Type: application/json" -d '{"files": ["https://yoursite.com/static/js/vendor.xxx.js"]}' -
本地模拟预热：用 curl 加 CDN 回源 Host 模拟边缘节点行为：
curl -I -H "Host: your-origin-domain.com" http://your-cdn-ip/static/js/vendor.7c2a1e8d.js
（需已配置 DNS 解析或 hosts 绕过 CDN 域名解析）
注意：预热成功后，可通过 curl -I https://cdn.example.com/static/js/vendor.7c2a1e8d.js 查看响应头中 X-Cache: HIT 或 Age 字段是否大于 0，确认已缓存。
自动化集成到 CI/CD 流程
每次构建发布新版本时，自动提取 vendor 文件列表并触发预热，避免人工遗漏。示例 shell 脚本逻辑：
# 在 build 完成后执行
VENDOR_FILES=$(find ./build/static/js -name "vendor.*.js" -type f | xargs -n1 basename)
for file in $VENDOR_FILES; do
curl -X POST "https://cdn-api.example.com/push" \
-H "Authorization: Bearer $TOKEN" \
-d "{\"urls\": [\"https://cdn.example.com/static/js/$file\"]}"
done
更健壮的做法是结合 Webpack/Vite 构建插件，在 emit 阶段读取 compilation.assets 获取 vendor 文件名，再调用预热接口。
