发布于2023-01-18 22:42 阅读(1198) 评论(0) 点赞(5) 收藏(3)
开发完发布新版本后,在有些电脑上总需要强刷才能获取到最新版本的内容,太恶心了。
浏览器缓存(Browser Caching
)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。
附:前端缓存详解,看了这篇更容易理解缓存配置的概念,浏览器缓存主要有两类:协商缓存
和 彻底(强)缓存
。
例如:program
、cache-control 和 expires
都是前端缓存的关键字段,优先级是 pragma
> cache-control
> expires
,pragma
是旧产物,已经逐步抛弃,有些网站为了向下兼容还保留了这个字段。
.html
页面加 meta
标签<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
nginx
配置,让 index.html
不缓存vue
默认配置,打包后 css
和 js
的名字后面都加了哈希值,不会有缓存问题,但是 index.html
在服务器端可能是有缓存的,需要在服务器配置不让缓存 index.html
。
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
Vue
脚手架的情况下:vue.config.js
// 动态版本号
const version = new Date().getTime()
// 配置
module.exports = {
devServer: {},
filenameHashing: false, // 打包的时候不使用 hash 值,因为后面自行添加时间戳或者版本号了
css: {
// 是否使用 css 分离插件 ExtractTextPlugin
extract: {
// 输出编译后的文件名称:【文件名称.时间戳】、【文件名称.版本号.时间戳】...
filename: `css/[name].${version}.css`,
chunkFilename: `css/[name].${version}.css`
// filename: `css/[name].${process.env.VUE_APP_VERSION}.${version}.css`,
// chunkFilename: `css/[name].${process.env.VUE_APP_VERSION}.${version}.css`
}
},
configureWebpack: {
output: { // 输出编译后的文件名称:【文件名称.时间戳】、【文件名称.版本号.时间戳】...
filename: `js/[name].${version}.js`,
chunkFilename: `js/[name].${version}.js`
// filename: `js/[name].${process.env.VUE_APP_VERSION}.${version}.js`,
// chunkFilename: `js/[name].${process.env.VUE_APP_VERSION}.${version}.js`
}
}
}
webpack
的情况下:webpack.config.js
const date = new Date()
const version = moment(date).format('YYYYMMDDHHmmssSSS') // 打包时候的版本号
const timestamp = date.getTime() // 时间戳
// 注意需下面这段放到配置导出中
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath(`js/[name].[chunkhash:8].${ version }.js?_t=${ timestamp }`),
chunkFilename: utils.assetsPath(`js/[name].[chunkhash:8].${ version }.js?_t=${ timestamp }`)
}
有时候发布了新版本,用户不刷新或强制刷新,一直不能看不到最新版本代码
,则封装了套在切换页面时检查服务器是否有新版本,有新版本则直接强制刷新拉取最新版本代码,这样也解决了缓存问题,切换页面就能及时同步到最新版本代码
,使用也简单,导入之后两步小操作就能支持
。
支持 vue、react、原生 ...
项目使用。
version.js 下载地址,下载后导入项目任意工具文件夹即可。
vue
项目导入方式:在 src
文件夹中使用可以 const version = require('@/utils/version')
这样引入使用,在根目录也就是 src
之外的文件夹则只能 const version = require('./src/utils/version')
这样引入使用。
使用方式,只需要 两个位置导入使用
即可:
1、「如果是原生开发,第一步可以改为手动创建文件,并每次修改版本号即可」
在打包配置文件中(例如:vue.config.js
)创建版本文件,因为只需要 build
时才需要创建版本文件,版本文件以时间戳为版本号,所以不需要操心。
// 在 build 时,每次创建/更新版本文件
const version = require('./src/utils/version')
version.create()
2、打包有了版本号,发布上去后,那就需要拉回来校验是否有新版本,所以推荐放到路由守卫里面检查,这个网络要求不高,怕影响跳转体验无感,可以放置在 路由跳转后
的回调中操作,这样更新版本了,切换页面,发现有新版本直接强刷到最新版本。
import router from '@/router'
const version = require('@/utils/version')
// 路由跳转后执行
router.afterEach((to, from) => {
// 如果不想每个路由都检查是否有新版本,只需要在特定的页面才需要检查版本,可以在这里做白名单判断
// 兼容版本,如果是新版本则进行刷新并缓存
version.getPro()
})
// 路由跳转前执行
router.beforeEach((to, from, next) => {
next()
})
原文链接:https://blog.csdn.net/zz00008888/article/details/127384635
作者:Bhbvhbbgg
链接:http://www.qianduanheidong.com/blog/article/494764/1d520556981dde7a11f9/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!