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 相关文章推荐
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
JS document对象简单用法完整示例
Jan 14 Javascript
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
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python是编译运行的验证方法
2015/01/30 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
python实现logistic分类算法代码
2020/02/28 Python
python 数据类型强制转换的总结
2021/01/25 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
什么是servlet链?
2014/07/13 面试题
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书