静态资源加载缓慢应通过cdn加速、nginx缓存头设置、前端url切换、cdn分级缓存及nginx本地proxy_cache五步优化：独立cdn域名接入并回源配置；nginx为静态文件设1年expires与immutable；构建工具配置publicpath指向cdn；cdn按类型设30天/ttl=0缓存规则；nginx启用proxy_cache减少回源压力。
如果您已部署网站但静态资源（如 CSS、JS、图片、字体）加载缓慢，页面首屏时间偏高，则很可能是源站直连导致的网络延迟与带宽瓶颈。以下是实现静态资源加速的多种配置路径：
一、CDN 域名接入与回源配置
该方法通过将静态资源托管至 CDN 边缘节点，使用户从地理最近的服务器获取内容，显著降低 RTT 并分担源站压力。需确保 CDN 加速域名独立于主站域名（例如 static.example.com），并正确指向源站 Nginx。
1、登录 CDN 服务商控制台（如阿里云 CDN、腾讯云 CDN 或 Cloudflare），进入「域名管理」→「添加域名」。
2、填写加速域名（如 static.example.com），选择加速区域（中国大陆需已完成 ICP 备案）。
3、设置源站信息：填写 Nginx 服务器公网 IP 或主域名（如 example.com），启用「强制 HTTPS 回源」。
4、完成域名所有权验证：按提示在 DNS 解析平台添加指定 TXT 记录，等待控制台显示「已验证」。
5、获取 CDN 分配的 CNAME 地址（如 static.example.com.w.kunlungr.com），在 DNS 中为加速域名添加 CNAME 记录并保存。
二、Nginx 静态资源缓存头精细化设置
此步骤确保浏览器与中间代理（包括 CDN 节点）能正确识别资源的不可变性，避免重复请求。关键在于为不同资源类型设置匹配其更新频率的 Cache-Control 与 expires 指令。
1、编辑 Nginx server 块配置文件（如 /etc/nginx/conf.d/example.conf）。
2、插入以下 location 块（置于 root 指令同级）：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2|ttf|eot|webp|pdf|xml|txt)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header X-Content-Type-Options nosniff;
try_files $uri =404;
}
3、确认该 location 不被其他 rewrite 或 proxy_pass 规则覆盖，执行 nginx -t && nginx -s reload 重载配置。
三、前端资源链接自动切换至 CDN 域名
若 HTML、CSS 或 JS 中仍引用 /static/logo.png 等相对或源站绝对路径，用户请求仍将绕过 CDN。必须将所有静态资源 URL 替换为 CDN 加速域名，才能触发边缘缓存。
1、Webpack 项目：在 webpack.config.js 中设置 output.publicPath: 'https://static.example.com/'。
2、Vite 项目：在 vite.config.ts 中配置 base: 'https://static.example.com/'。
3、Egg.js 项目：修改 config/config.default.js 中 siteFile 配置，将字符串值设为 CDN 地址（如 '/logo.png': 'https://static.example.com/logo.png'）。
4、无法修改构建流程时（如传统 PHP 站点），可在 Nginx 中添加临时重写规则（不推荐长期使用）：
rewrite ^/(static|assets|dist)/(.*)$ https://static.example.com/$2 permanent;
四、CDN 缓存规则分级配置
CDN 控制台中的缓存规则决定边缘节点如何存储与刷新资源。应按文件类型设置差异化 TTL，避免动态资源被错误缓存，同时保障静态资源长期有效。
1、进入 CDN 控制台「缓存配置」→「新增缓存规则」。
2、添加第一条规则：匹配文件类型 .js;.css;.woff2;.ttf;.png;.jpg;.webp;.gif;.ico;.svg，缓存时间设为 30天。
3、添加第二条规则：匹配路径前缀 /zb_users/upload/（Z-Blog 用户上传目录），缓存时间设为 30天。
4、添加第三条规则：匹配文件类型 .php;.html;.htm，缓存时间设为 0秒（即不缓存）。
5、保存后，在控制台「刷新预热」中手动提交关键资源 URL 进行首次预热（如 https://static.example.com/main.css）。
五、Nginx 本地磁盘缓存（proxy_cache）增强回源效率
当 CDN 节点缓存失效并发起回源请求时，Nginx 可自身缓存响应结果，减少对后端应用（如 PHP-FPM 或 Node.js）的重复调用，提升回源吞吐能力。
1、在 http 块顶部添加缓存路径定义：
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m use_temp_path=off;
2、在 server 块内新增 location 块：
location ~* \.(js|css|png|jpg|gif|webp|woff2|ttf)$ {
proxy_cache my_cache;
proxy_cache_valid 200 304 1h;
proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
proxy_pass http://127.0.0.1:8080; # 指向后端应用服务
add_header X-Cache-Status $upstream_cache_status;
}
3、创建缓存目录并赋权：mkdir -p /var/cache/nginx && chown www-data:www-data /var/cache/nginx。
