核心是分两层缓存：浏览器端用Cache-Control精准控制静态资源缓存（如哈希文件设max-age=31536000并加immutable，HTML禁用缓存），Nginx代理层通过proxy_cache缓存后端响应以减压；同时优化传输（sendfile、tcp_nopush）、压缩（gzip）及多项目路径隔离。
核心是分两层做：一层让浏览器自己缓存，另一层让 Nginx 代理缓存后端响应。两者目标不同，不能互相替代，配合使用效果最好。
浏览器端缓存：靠 Cache-Control 精准控制
静态资源（JS、CSS、图片、字体）发布后极少变动，应让浏览器长期持有。关键是用 Cache-Control，而不是只依赖 expires。
- 带哈希指纹的文件（如
app.a1b2c3.js）：可设为永久缓存，并加immutable防止重验证add_header Cache-Control "public, max-age=31536000, immutable"; - 不带版本号的 HTML 文件：不宜长期缓存，建议禁用或设极短时间
add_header Cache-Control "no-cache, must-revalidate"; - 避免 location 优先级踩坑：正则匹配（如
~ \.js$）可能被更高优先级的^~或=location 覆盖，建议把缓存配置写在最匹配的 location 块内，或用 if 判断扩展名兜底
Nginx 代理缓存：减少回源压力
当 Nginx 充当反向代理（比如前端资源由 Node/PHP 动态生成），可在 Nginx 层缓存后端响应，避免每次请求都打到应用服务器。
- 先在 http 块定义缓存区：
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=2g inactive=1h use_temp_path=off; - 在具体 location 中启用：
proxy_cache my_cache;<br>proxy_cache_valid 200 304 12h;<br>proxy_cache_valid 404 1m;<br>proxy_cache_key "$scheme$request_method$host$request_uri";
- 对登录页、含用户信息的接口等动态内容，用
proxy_cache_bypass或proxy_no_cache显式跳过缓存
传输与文件系统层面优化
这些配置不涉及缓存逻辑，但直接影响静态资源交付速度：
-
sendfile on;：启用内核零拷贝，省去用户态内存复制 -
tcp_nopush on;：配合 sendfile，等数据包填满再发，减少小包数量 -
open_file_cache max=100000 inactive=300s;：缓存文件句柄和元数据，降低 stat() 系统调用开销 -
gzip on;和gzip_types：对文本类资源（HTML、JS、CSS）开启压缩，减小体积
多项目部署时的路径隔离
多个前端项目共用一台 Nginx 时，静态资源容易因 location 匹配错乱导致 404。例如访问 /h5/static/js/app.js 却在主项目 root 下查找。
- 推荐为每个项目单独配置静态资源处理块，明确指定
root路径 - 用前缀正则精准匹配，如：
location ~ ^/h5/.*\.(js|css|png|jpg)$ {<br> root /var/www/h5;<br> expires 30d;<br> try_files $uri =404;<br>} - 确保
try_files在 SPA 路由中正确回退，如try_files $uri $uri/ /h5/index.html;
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
