CDN配置与浏览器缓存实战教程

本文深入解析了静态资源加载缓慢的五大实战优化策略：通过独立CDN域名接入与回源配置实现地理就近分发；利用Nginx精细化设置1年有效期+immutable缓存头，确保浏览器与中间代理高效复用；借助构建工具（Webpack/Vite等）自动将资源URL切换至CDN域名，真正打通加速链路；在CDN控制台按文件类型分级配置缓存TTL（如静态资源30天、HTML/PHP不缓存），兼顾性能与实时性；最后叠加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。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CDN配置与浏览器缓存实战教程》文章吧，也可关注golang学习网公众号了解相关技术文章。