当前位置：首页 > news >正文

阿里云 CDN + 静态资源（图片 / JS/CSS）缓存优化

news 2025/11/6 6:27:37

架构（主站www→CDN picdn→源站public）：

一、CDN缓存优化（核心：提高命中率，减少回源流量）

缓存优化的核心目标是「让CDN尽量缓存你的静态资源，少向源站（public）请求」，阿里云CDN需配置5个关键项，按优先级操作：

1. 第一步：配置精准的「缓存规则」（最核心）

作用：指定哪些资源缓存、缓存多久，避免“不该缓存的缓存了，该缓存的没缓存”。

操作路径：登录阿里云CDN控制台 → 左侧「域名管理」→ 找到你的CDN域名（picdn.yuming.com）→ 点击「配置」→ 下滑找到「缓存配置」→ 「缓存规则」→ 点击「添加规则」。
配置内容（按资源类型分3条规则，优先级从高到低）：

规则名称	匹配模式	缓存键配置（关键！）	缓存过期时间	作用
图片类资源缓存	后缀匹配	包含：jpg,jpeg,png,gif,webp,bmp,svg,ico,tiff,avif,heic	30天	图片更新频率低，长缓存减少回源
JS/CSS资源缓存	后缀匹配	包含：js,css,woff2,woff,ttf	15天	静态脚本/css，中期缓存
其他静态资源	前缀匹配	路径：/uploads/（你的静态资源存储目录）	7天	兜底缓存，覆盖未单独配置的资源

关键注意点：
- 缓存键配置：默认勾选「协议+域名+路径+查询参数」，但要点击「高级配置」→ 「忽略参数」→ 勾选「忽略全部参数」或「忽略指定参数」（比如忽略 t=123、v=xxx 这类临时参数），避免“相同资源因参数不同被重复缓存”（比如 a.jpg?t=1 和 a.jpg?t=2 被当成两个资源）。
- 优先级：图片规则＞JS/CSS规则＞其他规则（阿里云默认按添加顺序排序，可手动拖拽调整）。
- 不要勾选「遵循源站Cache-Control」：因为你源站是HTTP回源且没配置Cache-Control，勾选后会导致CDN不缓存，直接回源。

2. 第二步：开启「缓存预热」（主动把高频资源缓存到CDN）

作用：新上线或高频访问的资源（比如首页轮播图、热门商品图片），主动推送到CDN节点，用户第一次访问就命中缓存，不用等CDN回源拉取。

操作路径：CDN控制台 → 左侧「缓存预热」→ 「添加预热任务」。
配置内容：
- 加速域名：选择 picdn.yuming.com。
- 预热URL：输入资源完整URL（支持批量粘贴，每行1个），比如 https://picdn.yuming.com/uploads/attach/2025/09/xxx.jpg。
- 选择「强制覆盖」（可选，更新资源时用）→ 提交。
注意事项：
- 阿里云CDN有免费预热额度（按套餐不同，通常1000-10000条/天），优先预热高频访问的资源，别浪费额度。
- 预热完成后，在「预热记录」里查看状态（“成功”即生效）。

3. 第三步：配置「忽略URL参数」（补充缓存键优化）

作用：进一步避免因无关参数导致的缓存失效，和第一步的「缓存键忽略参数」互补。

操作路径：CDN域名配置页 → 「缓存配置」→ 「忽略URL参数」→ 点击「设置」。
配置内容：选择「忽略全部参数」（适合纯静态资源，无动态参数需求），或「忽略指定参数」（比如 t、v、timestamp 等临时参数）。
举例：如果用户访问 a.jpg?t=123 和 a.jpg?t=456，CDN会当成同一个 a.jpg 缓存，提高命中率。

4. 第四步：开启「缓存穿透防护」（避免恶意请求打穿CDN）

作用：防止有人请求不存在的资源（比如 xxx.jpg/123），导致CDN频繁回源（源站返回404，CDN不缓存），浪费回源流量。

操作路径：CDN域名配置页 → 「安全配置」→ 「缓存穿透防护」→ 开启。
配置内容：
- 防护模式：选择「智能防护」（阿里云自动识别恶意请求）。
- 缓存不存在资源：勾选「缓存404状态码」→ 缓存时间设为「10分钟」（短期缓存，避免重复回源）。

5. 第五步：配置「防盗链」（双重保障，避免盗链消耗流量）

作用：只允许主站（www.yuming.com）和CDN回源IP访问，防止别人盗用你的CDN资源（比如在其他网站直接引用你的图片），导致额外流量消耗。

操作路径：CDN域名配置页 → 「安全配置」→ 「Referer防盗链」→ 开启。
配置内容：
- 防盗链类型：选择「白名单」。
- 允许的Referer：输入 https://www.yuming.com/（主站域名，结尾加 / 匹配所有子路径），再添加「CDN回源IP段」（从阿里云CDN控制台「回源配置」→ 「回源IP白名单」获取官方IP段，复制粘贴到这里）。
- 勾选「允许空Referer」（可选，避免部分浏览器直接访问图片时被拦截）。

二、资源压缩（核心：减小资源体积，节省传输流量）

阿里云CDN支持「Gzip压缩」和「Brotli压缩」（优先Brotli，压缩率更高，节省流量更多），配置后图片/JS/CSS体积可减少30%-70%，操作步骤如下：

1. 第一步：开启「Brotli压缩」（推荐优先）

操作路径：CDN域名配置页 → 「性能优化」→ 「压缩配置」→ 找到「Brotli压缩」→ 开启。
配置内容：
- 压缩级别：选择「6级」（平衡压缩率和速度，阿里云默认推荐，级别越高压缩率越高，但CDN节点消耗略大）。
- 压缩文件类型：勾选你需要压缩的资源类型，推荐：
  - 文本类：js,css,html,htm,xml,json
  - 图片类：jpg,png,gif（注意：已压缩的图片格式如webp、avif无需再压缩，勾选后效果有限）。
作用：比如1MB的JS文件，压缩后可能只有300KB，传输流量直接减少70%。

2. 第二步：开启「Gzip压缩」（作为Brotli的兼容备份）

操作路径：同一「压缩配置」页面 → 找到「Gzip压缩」→ 开启。
配置内容：
- 压缩级别：选择「6级」（和Brotli一致）。
- 压缩文件类型：和Brotli保持一致（文本类+部分图片类）。
作用：部分老旧浏览器不支持Brotli，会自动使用Gzip压缩，确保所有用户都能享受压缩效果。

3. 第三步：源站Nginx同步配置压缩（可选但推荐）

如果CDN回源时，源站（public.yuming.com）返回的资源已压缩，CDN可直接转发，减少CDN节点的压缩压力。在源站的Nginx配置中添加以下代码：

server {listen 80;server_name public.yuming.com;root /cipan/www/wwwroot/yuming/public;# 开启Gzip压缩（和CDN兼容）gzip on;gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/png image/gif;gzip_comp_level 6;gzip_min_length 1k; # 小于1KB的文件不压缩（避免浪费资源）gzip_vary on; # 告诉CDN和浏览器该资源已压缩# 其他配置（IP白名单、禁止敏感文件等，保持之前的配置）
}

三、配置生效与验证（确保优化落地）

1. 生效时间：

缓存规则、压缩配置：提交后1-5分钟生效（阿里云CDN配置同步有延迟）。
缓存预热：通常5-30分钟生效（取决于资源大小和节点数量）。

2. 验证方法（用curl命令或浏览器开发者工具）：

（1）验证缓存是否生效：

在本地终端执行命令（替换成你的图片URL）：

curl -I https://picdn.yuming.com/uploads/attach/2025/09/xxx.jpg

若返回头中有 X-Cache: HIT（命中缓存），说明缓存生效；若为 X-Cache: MISS（未命中），刷新几次再试（首次访问可能未缓存）。
查看 Cache-Control 头，确认过期时间和你配置的一致（比如 max-age=2592000 对应30天）。

（2）验证压缩是否生效：

同样用curl命令（添加 -H "Accept-Encoding: br,gzip" 模拟浏览器请求）：

curl -I -H "Accept-Encoding: br,gzip" https://picdn.yuming.com/xxx.js

若返回头中有 Content-Encoding: br（Brotli）或 gzip，说明压缩生效。
对比压缩前后的文件大小：用浏览器「开发者工具」→ 「Network」→ 查看资源的「Size」（压缩后大小）和「Content-Length」（原始大小），确认体积减少。

（3）查看阿里云CDN监控：

控制台 → 「监控报表」→ 「缓存命中率」：目标≥90%（越高越好，说明大部分请求从CDN返回，少回源）。
「流量报表」→ 「回源流量」：配置后应明显下降（缓存生效）。
「压缩率报表」：查看Brotli/Gzip的压缩率（通常≥30%）。

四、额外优化技巧（进一步节省流量）

图片格式转换：在阿里云CDN开启「图片处理」功能（控制台 → 「媒体处理」→ 「图片处理」），将jpg/png自动转换为webp/avif格式（体积比jpg小50%+，且质量无损），配置后CDN会自动向支持的浏览器返回优化格式。
过期资源刷新：如果资源更新了（比如图片替换），在CDN控制台「缓存刷新」→ 「添加刷新任务」，输入更新的URL，强制CDN重新拉取最新资源（避免用户看到旧图）。
关闭不必要的缓存：对动态资源（比如.php、.jsp），在缓存规则中添加「后缀匹配：php,jsp」→ 缓存时间设为「0秒」（不缓存），避免动态内容被缓存导致异常。