文章目录1. location 指令回顾2. location ~* 语法3. 配置一通用静态资源目录解释4. 配置二单独优化图片缓存解释5. 两个配置的区别6. 总结在前端项目上线时我们经常需要对静态资源HTML、CSS、JS、图片、字体等做缓存优化。在Nginx配置里经常会看到这样的写法# 静态资源目录 location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|ttf)$ { root /var/www/static; expires 30d; # 缓存30天 access_log off; } # 静态资源缓存控制 location ~* \.(jpg|png|gif)$ { expires 365d; add_header Cache-Control public, no-transform; }很多小伙伴第一次看到这种配置都会有疑问location ~*是什么语法\.(jpg|png|gif)$这种正则怎么理解为什么要分开两个规则下面详细讲解。1.location指令回顾在Nginx中location用于匹配请求的 URL决定如何处理请求。常见的匹配方式有前缀匹配最常见location /static/ { root /var/www/html; }匹配/static/开头的请求。精确匹配location /index.html { root /var/www/html; }只匹配/index.html。正则匹配location ~ \.php$ { fastcgi_pass 127.0.0.1:9000; }匹配.php结尾的请求。2.location ~*语法~表示使用正则匹配区分大小写。~*表示使用正则匹配不区分大小写。举个例子location ~ \.jpg$ # 区分大小写logo.JPG 不会匹配 location ~* \.jpg$ # 不区分大小写logo.JPG 也能匹配因此location ~* \.(jpg|png|gif)$表示匹配以 .jpg 或 .png 或 .gif 结尾的请求不区分大小写。3. 配置一通用静态资源目录location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|ttf)$ { root /var/www/static; expires 30d; access_log off; }解释~* \.(html|htm|gif|...)$匹配常见的静态资源扩展名网页、图片、文本、JS、CSS、字体等。作用全局规则一网打尽常见静态资源。root /var/www/static;静态文件所在目录。请求/main.css→ 实际读取/var/www/static/main.cssexpires 30d;设置缓存时间为 30 天。浏览器收到响应头Cache-Control: max-age2592000 Expires: 30天后日期access_log off;关闭访问日志减少日志文件体积优化性能。4. 配置二单独优化图片缓存location ~* \.(jpg|png|gif)$ { expires 365d; add_header Cache-Control public, no-transform; }解释~* \.(jpg|png|gif)$匹配所有图片资源不区分大小写。expires 365d;设置缓存时间为一年。add_header Cache-Control public, no-transform;public允许任何中间代理如 CDN缓存该资源。no-transform禁止代理或浏览器对图片进行格式转换或压缩保证原图质量。 为什么要单独写图片体积大通常不常变动适合长时间缓存。JS/CSS 更新频率高缓存过久可能导致版本问题因此只给 30 天。5. 两个配置的区别配置匹配范围缓存策略应用场景配置一html, js, css, 图片, 字体等缓存 30 天整站通用静态资源配置二图片 (jpg/png/gif)缓存 365 天 CDN 优化针对图片资源的专项优化实际项目里两者会同时存在。优先匹配更具体的规则比如图片走 365d。其他资源走默认的 30d。6. 总结location ~* 使用正则匹配不区分大小写。\.(xxx|yyy)$ 匹配以指定扩展名结尾的文件。可以为不同类型的资源设置不同的缓存策略。HTML/JS/CSS → 短缓存30d图片/字体 → 长缓存365dimmutable这样既能提高性能又能避免缓存导致的版本问题。✍️一句话记忆location ~* 不区分大小写的正则匹配常用于静态资源缓存控制。 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目