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读取本地excel文档数据的代码
Nov 11 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
关于layui 下拉列表的change事件详解
Sep 20 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手册及PHP编程标准
2006/12/17 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
onpropertypchange
2006/07/01 Javascript
js的event详解。
2006/09/06 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python 生成器需注意的小问题
2020/09/29 Python
Reformation官网:美国女装品牌
2018/09/14 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏