前端部署中添加版本和保留旧版本的必要性

前端部署

内容声明

本文仅用于技术分享和学习交流，内容不包含任何广告、推广、引流、付费课程或外链信息。所有示例和配置均为技术实践，欢迎参考和自定义。

介绍了前端项目部署在 CDN 上因缓存未及时刷新导致静态资源访问异常的问题，提出在构建打包时为文件或文件夹添加版本号标识（递增版本号、Hash 值或时间戳）并保留旧资源的解决方案，确保资源更新后仍可正常访问。提供了目录结构示例与参考代码链接。

背景

前端项目会部署在云服务商的 CDN 上面，CDN 的缓存如果不强制刷新目录的话，会定期刷新缓存。试想一下，当更新一个服务时，虽然制品仓里面的资源已经更新，https://www.example.com/index.html 里面的静态资源链接也已经更换，但是部分非常规链接，例如 https://www.example.com/index.html?from=others，缓存还没有刷新，仍旧在访问已经不存在的静态资源，就会导致诸如白屏这样的前端事故。

解决方案

前端项目构建打包的时候，需要在文件或文件夹上加上特定版本号的标识，并且旧的资源需要保留。版本号可以是递增的版本号 (v1.0.0 => v1.0.1)、根据文件生成的 Hash 值、时间戳。

案例

构建打包出来的页面结构互相独立。

├── package.json
└── dist
    ├── page1
    │   ├── index.html
    │   └── 20210526.194300
    │       ├── 7ffaa4103cae71b1629a.css
    │       └── 7ffaa4103cae71b1629a.js
    └── page2
        ├── index.html
        └── 20210526.194300
            ├── 88870cd4b2e554c2a754.css
            └── 88870cd4b2e554c2a754.js

实际制品仓中的资源:

制品仓中的资源

代码参考: GitHub: multipage-template

更新记录

本文首次编辑于 2021-05-31，最近更新于 2025-11-24。

版权声明

本文为原创文章，作者保留版权。转载请保留本文完整内容，并以超链接形式注明作者及原文出处。

作者: 除除

原文: http://blog.mazey.net/2161.html

(完)