加版本号能强制浏览器更新CSS缓存，因浏览器仅依据URL是否一致判断缓存复用，修改查询参数（如?v=1.0.0）即视为新资源；在max-age强缓存下，不改URL则永不请求新文件。
为什么加版本号能强制浏览器更新CSS
浏览器缓存 CSS 文件时，只看 URL 是否完全一致。哪怕文件内容变了，只要 URL 没变，就可能复用旧缓存。v=1.0.0 这种查询参数本质是 URL 的一部分，改了它，浏览器就当它是新资源重新请求。
注意：Cache-Control: max-age=31536000（一年）这类强缓存策略下，不改 URL 就永远不发新请求——版本号不是“可选优化”，而是生效前提。
三种常见版本号写法及坑点
实际项目里最常遇到的不是“要不要加”，而是“怎么加才不翻车”：
-
?v=<strong>时间戳</strong>：每次构建都变，缓存彻底失效——适合开发期，但上线后会丢失长期缓存优势 -
?v=<strong>git commit hash</strong>：语义清晰、精准控制，但需构建脚本提取git rev-parse --short HEAD，CI 环境没 git 目录会报错 -
?v=<strong>文件内容 hash</strong>（如main.a1b2c3d4.css）：最稳妥，但必须配合构建工具重命名 + HTML 中自动注入，否则手写链接会断
Webpack/Vite 里怎么安全注入版本号
手动拼接 ?v=xxx 很容易漏改或写死，推荐走构建流程自动化：
立即学习“前端免费学习笔记（深入）”；
- Webpack：用
MiniCssExtractPlugin默认生成带 contenthash 的文件名，再配HtmlWebpackPlugin自动替换<link href="main.css">为<link href="main.a1b2c3d4.css"> - Vite：默认开启
build.rollupOptions.output.entryFileNames和assetFileNames的 hash 输出，HTML 中直接引用style.css即可，Vite 插件会自动处理路径映射 - 关键提醒：如果用
import './index.css'方式加载，确保 CSS 不被抽成独立文件（比如关掉css.codeSplit），否则 hash 名和 import 路径对不上，404
CDN 和 Nginx 缓存要同步清理
光改 HTML 里的链接不够。CDN 或反向代理（如 Nginx）可能按 URL 路径缓存，而忽略查询参数：
- Nginx 默认不缓存带
?的请求，但若配置了proxy_cache_key $scheme$host$request_uri，$request_uri包含参数，那v=1.0.0和v=1.0.1就是两个缓存 key——没问题 - 但很多 CDN（如 Cloudflare）默认忽略查询参数做缓存，这时
?v=1.0.1仍可能返回旧内容。必须在缓存规则里显式启用 “Include query string” 或改用文件名 hash - 更稳的做法：上线后主动调用 CDN 的 purge 接口，清掉旧 CSS 的 URL，而不是只靠客户端刷新
真正卡住人的往往不是怎么加版本号，而是 CDN 缓存层级比你想象中更深一层，且不报错、不提示，只默默返回过期内容。
