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 相关文章推荐
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 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
PHP开发框架总结收藏
2008/04/24 PHP
php生成随机颜色的方法
2014/11/13 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python_LDA实现方法详解
2017/10/25 Python
Python中类的初始化特殊方法
2017/12/01 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python分布式编程实现过程解析
2019/11/08 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Python flask框架端口失效解决方案
2020/06/04 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
公司门卫岗位职责范本
2014/07/08 职场文书
会议主持词结束语
2015/07/03 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
Python基础之条件语句详解
2021/06/16 Python
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS