完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）

一、简介

开发完发布新版本后，在有些电脑上总需要强刷才能获取到最新版本的内容，太恶心了。
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
附：前端缓存详解，看了这篇更容易理解缓存配置的概念，浏览器缓存主要有两类：协商缓存 和 彻底(强)缓存。

例如：program、cache-control 和 expires 都是前端缓存的关键字段，优先级是 pragma > cache-control > expires，pragma 是旧产物，已经逐步抛弃，有些网站为了向下兼容还保留了这个字段。

二、解决方案

1、在 `.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">

2、后端 `nginx` 配置，让 `index.html` 不缓存

vue 默认配置，打包后 css 和 js 的名字后面都加了哈希值，不会有缓存问题，但是 index.html 在服务器端可能是有缓存的，需要在服务器配置不让缓存 index.html。

location = /index.html {add_header Cache-Control "no-cache, no-store";
}

3、使用 `Vue` 脚手架的情况下：`vue.config.js`

// 动态版本号
const version = new Date().getTime()
// 配置
module.exports = {devServer: {},filenameHashing: false, // 打包的时候不使用 hash 值，因为后面自行添加时间戳或者版本号了css: {// 是否使用 css 分离插件 ExtractTextPluginextract: {// 输出编译后的文件名称：【文件名称.时间戳】、【文件名称.版本号.时间戳】...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`}}
}

4、使用 `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 }`)
}

5、有新版本发布，及时拉取最新版本代码

有时候发布了新版本，用户不刷新或强制刷新，一直不能看不到最新版本代码，则封装了套在切换页面时检查服务器是否有新版本，有新版本则直接强制刷新拉取最新版本代码，这样也解决了缓存问题，切换页面就能及时同步到最新版本代码，使用也简单，导入之后两步小操作就能支持。
支持 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()
})
```

完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）相关推荐

解决vue项目在ie浏览器缓存问题。
解决vue项目在ie浏览器缓存问题. 参考文章: (1)解决vue项目在ie浏览器缓存问题. (2)https://www.cnblogs.com/jiangweichao/p/11255451.ht ...
html图片显示变形,CSS完美解决前端图片变形问题的方法
在头条IT学堂看到CSS完美解决前端图片变形问题的文章,就记录分享下: 一.让图片的宽度或者高度等于容器的宽度或高度,多余的裁掉,然后让图片居中: div{ width: 200px; height: ...
前端更新需要清空浏览器缓存_js清除浏览器缓存的几种方法
关于浏览器缓存浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据.像股票类网站实时更新等,这样的网站 ...
火狐浏览器如何禁止网站发消息火狐浏览器禁止网站发消息的方法
火狐浏览器是一款非常安全的浏览器,有很多的小伙伴都在使用它,很多朋友在使用火狐浏览器时都遇到过网站请求发送消息通知权限的情况,那么应该如何解决这个问题呢?下面就和小编一起来看看有什么好的方法吧. 火狐 ...
前端更新需要清空浏览器缓存_浏览器缓存机制分析及前端缓存清理
浏览器缓存机制分析及前端缓存清理发布时间:2018-06-03 16:56, 浏览次数:857 本文主题:理清浏览器的缓存机制的内部逻辑,并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面 ...
关于前端更新需要清空浏览器缓存
一.HTTP缓存之Cache-Control Cache-Control 是最重要的规则.这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令.这些指令指定用于阻止缓存对请求或响应造成不利干 ...
彻底解决让用户清一下浏览器缓存
nginx设置不缓存静态入口资源问题描述每当我们发布版本之后万恶的index.html的缓存老是需要手动清除一下,才能加载新的js文件(虽然我们使用了hash后缀打包js文件,但是html文件入口 ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
storyboard(故事版)新手教程图文详解 4.把约束拉成属性在代码文件里进行修改
继上一篇内容http://blog.csdn.net/u013582514/article/details/49977437 上一篇文章中我们讲述了怎么使用scrollview在故事版中设置它的相关滑 ...

完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）

一、简介

二、解决方案

1、在 `.html` 页面加 `meta` 标签

2、后端 `nginx` 配置，让 `index.html` 不缓存

3、使用 `Vue` 脚手架的情况下：`vue.config.js`

4、使用 `webpack` 的情况下：`webpack.config.js`

5、有新版本发布，及时拉取最新版本代码

完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）相关推荐

最新文章

热门文章

完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）

一、简介

二、解决方案

1、在 .html 页面加 meta 标签

2、后端 nginx 配置，让 index.html 不缓存

3、使用 Vue 脚手架的情况下：vue.config.js

4、使用 webpack 的情况下：webpack.config.js

5、有新版本发布，及时拉取最新版本代码

完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）相关推荐

最新文章

热门文章

1、在 `.html` 页面加 `meta` 标签

2、后端 `nginx` 配置，让 `index.html` 不缓存

3、使用 `Vue` 脚手架的情况下：`vue.config.js`

4、使用 `webpack` 的情况下：`webpack.config.js`