如何通过Vue实现增强缓存及版本号管理？

本文共计779个文字，预计阅读时间需要4分钟。

强缓存：到底什么是强缓存？强在哪儿？

其实强是相对于弱缓存而言的。当浏览器请求某个文件时，如果该文件命中强缓存，那么浏览器会直接从本地获取资源，无需再次向服务器发起请求。

具体来说，当浏览器请求一个文件时，服务器会在response header中设置缓存策略。如果设置了强缓存，比如Cache-Control: max-age=31536000，则意味着该文件在浏览器中最多可以缓存一年。在这段时间内，只要文件未被修改，浏览器都会直接使用本地缓存。

强缓存的优势在于：

1. 减少服务器压力：避免频繁请求服务器，减轻服务器负担。

2.提高访问速度：直接从本地获取资源，无需等待网络传输。

3.优化用户体验：页面加载更快，提高用户体验。

需要注意的是，强缓存仅适用于静态资源，如图片、CSS、JS等。对于动态内容，如API接口、数据库查询等，无法使用强缓存。

强缓存：

到底什么是强缓存？强在哪？其实强是强制的意思。当浏览器去请求某个文件的时候，服务端就在respone header里面对改文件做了缓存配置。缓存的时间、缓存类型都由服务端控制。

强缓存实现：

cache-control: max-age=315360000, public ,immutable

客户端和代理服务器都可以缓存该资源，在315360000秒（10年）的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求

参考文章"彻底弄懂强缓存与协商缓存"

index.html文件采用协商缓存，理由就是要用户每次请求index.html不拿浏览器缓存，直接请求服务器，这样就保证资源更新了，切记不要设置强缓存！！！

其他资源采用强缓存 + 协商缓存,理由就不多说了。

nginx配置

版本号管理在

.env.production 生产模式

.env.test 测试模式

VUE_APP_VERSION = T0.01 测试模式 VUE_APP_VERSION = V0.01 生产模式

在package.json配置了打包命令

npm run build 正式环境配V0.01版本号 npm run build:test 测试环境配T0.01版本号

通过webpack打包设置，name+版本号+时间戳.js

可以根据服务器设置强缓存，缓存静态文件

configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 filename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`, chunkFilename: `[name].${process.env.VUE_APP_VERSION}.${timeStamp}.js`, }, }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。