vue增加强缓存和版本号的实现方法


Posted in Javascript onMay 01, 2019

强缓存:

到底什么是强缓存?强在哪?其实强是强制的意思。当浏览器去请求某个文件的时候,服务端就在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`,
     },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue组件化中slot的基本使用方法
May 01 #Javascript
Vue基本使用之对象提供的属性功能
Apr 30 #Javascript
原生JS实现随机点名项目的实例代码
Apr 30 #Javascript
vue实现随机验证码功能的实例代码
Apr 30 #Javascript
详解vue 图片上传功能
Apr 30 #Javascript
vue移动端屏幕适配详解
Apr 30 #Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 #Javascript
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
初学Python实用技巧两则
2014/08/29 Python
决策树的python实现方法
2014/11/18 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python实现从wind导入数据
2019/12/03 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
学生会离职感言
2014/02/11 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
五一口号
2014/06/19 职场文书
在校学生证明格式
2015/06/24 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书