vue增加强缓存和版本号

F#函数派
• 阅读 5770

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

vue增加强缓存和版本号

强缓存实现:

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

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

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

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

nginx配置
vue增加强缓存和版本号

版本号管理在

.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`,
          },
}
点赞
收藏
评论区
推荐文章
Easter79 Easter79
4年前
Vue 的计算属性如何实现缓存?(原理深入揭秘)
前言很多人提起Vue中的computed,第一反应就是计算属性会缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。本文以Vue2.6.11版本为基础,就深入原理,带你来看看所谓的缓存到底是什么样的。注意本文假定你对Vue响应式原理已经有了基础的了解,如果对于Wat
混世魔王 混世魔王
3年前
皕杰报表的缓存问题
设置缓存是提高报表性能的手段之一,皕杰报表在配置文件reportconfig.xml中对缓存进行设置。在系统模式中通过设置开发模式或生产模式来确定是否启用报表缓存。develop在缓存设置中设置缓存方式。1、使用皕杰内置的缓存(即:设置eh"false")
东方客主 东方客主
5年前
一文读懂http缓存(超详细)
前端缓存前端缓存可分为两大类:http缓存和浏览器缓存。我们今天重点讲的是http缓存,所以关于浏览器缓存大家自行去查阅。下面这张图是前端缓存的一个大致知识点:(https://imghelloworld.osscnbeijing.aliyuncs.com/3e161cfcbe560b9608064ec91077346
Wesley13 Wesley13
4年前
NGINX 设置缓存时间
设置缓存原因一般的web项目,如果是前后不分离,采用模板生成页面的话,可以灵活控制js,css等静态文件的版本号。来避免浏览器缓存的问题但是目前是前后分离了,虽然前端发版都每次指定了版本号,但是发现有时候发版的时候,还是因为浏览器缓存导致了查看页面有时候出点小问题。因此为了避免浏览器缓存可能导致的问题,因此严谨一点NGIN
Stella981 Stella981
4年前
Redis都有哪些数据类型
string这是最基本的类型了,就是普通的set和get,做简单的kv缓存hash这个是类似map的一种结构,这个一般就是可以将结构化的数据,比如一个对象(前提是这个对象没嵌套其他的对象)给缓存在redis里,然后每次读写缓存的时候,可以操作hash里的某个字段。key150value{“id”:
Stella981 Stella981
4年前
Redis缓存穿透、缓存雪崩、并发问题分析与解决方案
(一)缓存和数据库间数据一致性问题分布式环境下(单机就不用说了)非常容易出现缓存和数据库间的数据一致性问题,针对这一点的话,只能说,如果你的项目对缓存的要求是强一致性的,那么请不要使用缓存。我们只能采取合适的策略来降低缓存和数据库间数据不一致的概率,而无法保证两者间的强一致性。合适的策略包括合适的缓存更新策略,更新数
Stella981 Stella981
4年前
Http 缓存策略
1)浏览器缓存策略浏览器每次发起请求时,先在本地缓存中查找结果以及缓存标识,根据缓存标识来判断是否使用本地缓存。如果缓存有效,则使用本地缓存;否则,则向服务器发起请求并携带缓存标识。根据是否需向服务器发起HTTP请求,将缓存过程划分为两个部分:强制缓存和协商缓存,强缓优先于协商缓存。强缓存,服务器通知浏览器一个缓存时间,在
Stella981 Stella981
4年前
Redis缓存的基本思想
1.缓存的基本思想很多朋友,只知道缓存可以提高系统性能以及减少请求相应时间,但是,不太清楚缓存的本质思想是什么。缓存的基本思想其实很简单,就是我们非常熟悉的空间换时间。不要把缓存想的太高大上,虽然,它的确对系统的性能提升的性价比非常高。其实,我们在学习使用缓存的时候,你会发现缓存的思想实际在操作系统或者其他地方都被大量用到。比如C
Stella981 Stella981
4年前
Django框架深入了解_05 (Django中的缓存、Django解决跨域流程(非简单请求,简单请求)、自动生成接口文档)
一、Django中的缓存:前戏:    在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面.当一个网站的用户访问量很大的时候,每一次的的后台操作,都会消耗很多的服务端资源,所以必须使用缓存来减轻后端服务器的压力.缓存是将一些常用
Wesley13 Wesley13
4年前
JS浏览器不缓存页面的几种方法
我们需不需要浏览器缓存?浏览器缓存,有时我们需要,有时我们不需要,就比如股票类型的网页就需要实时刷新数据,不能让页面从缓存里读取数据,如果对于一些不需要实时更新数据的网站来说,浏览器缓存可以提高加载速度,带来更好的用户体验,到底需不需要浏览器缓存,让我们自己操作!meta方法//不缓存<METAHTTPEQU
Nginx 缓存的工作原理
本文分享自天翼云开发者社区《》.作者:云海Nginx缓存的工作原理Nginx缓存分为多种类型,最常见的是代理缓存(ProxyCache)。1.代理缓存(ProxyCache)代理缓存的核心原理是:当客户端请求到达Nginx时,Nginx会检查缓存中是否存在