正文

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

卡尔特斯  卡尔特斯  2023-04-04  433

关键词：

一、简介

开发完发布新版本后，在有些电脑上总需要强刷才能获取到最新版本的内容，太恶心了。
浏览器缓存（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 分离插件 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`

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()
)
```

❤️android应用崩溃？嗯？莫慌，稳住！❤️(代码片段)

...f;嗯，稍等我看看什么问题，然后该锁定该锁定该解决解决。发版前减少bug、崩溃等，发版后遇到bug、崩溃也不要慌张，毕竟bug不会因为你查看详情

react-native集成tfs自动发版问题

...就有问题，这两个库没有导入进来，原因是路径不对了。解决方法：　　找的本地库的位置，拷贝到自动发版的目录下，就能自动发版。应该还有其他解决方案，只是一个发版而已，不影响程序本身，解决了就好了查看详情

easypoi中@excel注解中numformat的使用

...shine/p/11648652.html发现百分数格式为#.##%,于是我加了上去，发版后测试发现是可行的。 numFormat方法:发版后重新导出的正确格式数据: 查看详情

升级到 Forge 查看器 7.55 版后出现错误

...orge查看器的最新版本(7.55)中遇到错误。加载Revit模型时，浏览器控制台中显示以下错误：Failedtoloadmodel:NewConstruction.Errorcode:TypeError:e.target 查看详情

cmm的千行bug率是怎么计算的?

BUG是哪些BUG？发版前内部测试的，还是发版后客户反馈？还是所有的？代码行都包括哪些?增加的？减少的？修改的？注释、配置行等都算不算？参考技术A测试和反馈相加都算bug，代码行数是开发修改的都算，不过可能会去掉一... 查看详情

项目开发和发版前的工作整理

最近做了一个项目，只负责前端部分，总结一下做项目中的坑。首先是定位问题，我之前接到的通知是分析一下前端的工作量，进行一下人力安排排期，天真的我没有了解项目架构，仅仅是算了一下页面开发工作量和联调时间。... 查看详情

微信公众号html缓存处理

...重新登入，仍然显示的是老的页面；经过一番查找得到了解决方案：（1）公众号放的菜单地址后加?version=1.0.0每次更新页面则更新菜单；但是这样每次发版还得修改公众号的菜单，多一步很不方便；于是和前端一块尝试寻找到另... 查看详情

将 swift 更新到 4.0 版后 Carthage Build 失败

】将swift更新到4.0版后CarthageBuild失败【英文标题】：CarthageBuildFailedafterupdatingswifttoversion4.0【发布时间】：2017-09-2210:38:37【问题描述】：在将swift从3.2版更新到4.0版后，Carthage构建失败。以下是使用carthageupdate--platformiOS的结果。***F... 查看详情

gitlab发版ssh连接超时

...的开源项目，gitlab发版ssh连接超时可以设置超时时间即可解决，Gitlab是被广泛使用的基于git的开源代码管理平台，基于RubyonRails构建，主要针对软件开发过程中产生的代码和文档进行管理。查看详情

发版挂维护页配置

1.前端nginx进行维护页挂载配置#nginx的server标签内配置error_page501502503504505@maintain;location@maintain{rewrite^(.*)$/maintain/index.htmlbreak;}#此处跳转地址也可以使用软连接，设置到nginx默认的html目录中ln-s/maintain/index.html/usr/local/ng 查看详情

前端工程化-小程序持续交付平台化解决方案

背景当前场景下，一次发版工作最基本的流程如下，其中还省略了各种通知、确认环节。可以看到，前端研发在其中承担了很重的工作，流程长且无明确规范，导致整个过程发重复且繁琐。问题多个/多端小程序同... 查看详情

请问使用了小a家庭版后如何解决迅雷dht和upnp未启动问题拜托了各位谢谢

迅雷的这二个都是显示未启动的~如何解决！[]我的迅雷正常。可以这样设置一下试试看：停止小a的P2P防护和Outlook以及互联网邮件监控，下载完成右键扫描。标准监控中排除迅雷程序和迅雷的下载文件夹。如果使用拦截器，请关... 查看详情

“升级”到 Office 365 专业增强版后的 RODBC 连接

】“升级”到Office365专业增强版后的RODBC连接【英文标题】：RODBCconnectionafter"upgrade"toOffice365ProPlus【发布时间】：2016-03-2911:07:58【问题描述】：我的计算机刚刚“升级”到Office365专业增强版。我的很多工作都依赖RODBC连接... 查看详情

Big Sur 更新 11.3 版后 MacBook Pro 错误 Xampp 不起作用

】BigSur更新11.3版后MacBookPro错误Xampp不起作用【英文标题】：MacBookProErrorXamppdoesn\'tworkafterBigSurupdateVersion11.3【发布时间】：2021-07-2211:04:40【问题描述】：BigSur更新11.3版后错误Xampp不起作用今天我将我的mac更新到macOSBigSur版本11.3，... 查看详情

将 xcode 升级到 10.2 版后面临 AFNetworking 错误

】将xcode升级到10.2版后面临AFNetworking错误【英文标题】：FacingAFNetworkingErrorsafterupgradingxcodetoversion10.2【发布时间】：2019-08-0211:27:25【问题描述】：今天，我将我的xcode版本从10.1升级到了10.2版本。在xcode10.1中，我的项目运行良好，... 查看详情

升级到 Roslyn 分析仪 6.0 版后获取 CA2007

】升级到Roslyn分析仪6.0版后获取CA2007【英文标题】：GettingCA2007afterupgradingto6.0versionoftheRoslynAnalyzers【发布时间】：2021-12-2214:17:47【问题描述】：我们有一个.netcore3.1项目，我们刚刚将roslyn分析器升级到6.0版。这样做之后，以下代... 查看详情

初始安装oracle数据库11g快捷版后如何新建数据库？

】初始安装oracle数据库11g快捷版后如何新建数据库？【英文标题】：Howtocreateanewdatabaseafterinitallyinstallingoracledatabase11gExpressEdition?【发布时间】：2012-03-2100:08:21【问题描述】：我已经在我的电脑（windows7）上安装了OracleDatabase11gExpre... 查看详情

客户端单周发版下的多分支自动化管理与实践

...。基于以上背景，美团客户端研发平台适时地推行了单周发版的迭代策略。单周版本迭代的优点可以概括为三个方面：更快地验证产品创意是否符合预期，更灵活地上线节奏，更早地修复线上Bug。首先说一下美团平台的发版策略... 查看详情

正文