静态资源版本化的实践
2024-08-12
为CSS与JS添加版本号或内容哈希，可避免缓存导致的更新不生效问题。结合CDN与缓存规则效果更佳。
同时注意资源依赖与打包策略，以减少冗余加载。
版本化的方式
常见方式有文件名带版本号（如style.v1.css）、带内容哈希（如style.abcd1234.css）与查询参数（如style.css?v=1）。前两种由构建工具自动生成并替换引用，更可靠；查询参数相对简单，但在某些CDN与缓存策略下效果不如文件名版本化稳健。
内容哈希的优势在于只要文件内容改变，就会产生新的文件名，从而触发用户侧与CDN的更新。配合长缓存策略使用，能同时保证性能与正确性。
构建与引用替换
版本化需要与构建流程配合。在打包阶段产出带哈希的文件，同时更新HTML里的引用。若你的站点未使用打包工具，也可以在生成阶段依据时间或提交号拼接版本号，但仍建议用内容哈希以避免不必要的更新。
引用替换应尽量自动化，避免手工修改造成遗漏。发布前做一次链接有效性检查，确保所有引用都指向存在的资源，并且在HTTPS下没有混合内容。
缓存与失效
对于带版本或哈希的文件，可以使用较长的缓存时间；对于入口HTML与不带版本的资源，需要较短的缓存或不缓存，以便快速看到更新。必要时手动刷新CDN缓存或使用API清理指定文件。
如果你发现用户仍在加载旧资源，先检查是否存在“引用未更新”的情况，再看CDN与浏览器缓存是否如预期命中或失效。日志能帮助你定位问题并验证修复效果。
依赖与打包策略
合并小文件可以减少请求数，但要注意分包的边界，避免让每个页面都加载不必要的资源。按模块或页面划分打包输出，是兼顾性能与维护的常见做法。
字体与图片等资源同样需要版本化与缓存策略。对图片可以在构建时生成不同尺寸与格式，根据设备与网络条件选择合适的版本。
总结
资源版本化是静态站点的基础能力，它让“长缓存”与“正确更新”不再矛盾。只要把构建、引用替换与缓存策略协同起来，就能在长期维护中保持稳定与高效。