Vue 项目更新,浏览器不需强制刷新就可更新版本! 防止缓存
##浏览器渲染流程
1. 解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件
2. CSS 文件下载完成,解析 CSS 文件成树形的数据结构,然后结合 DOM 树合并成 RenderObject 树
3. 布局 RenderObject 树 (Layout/reflow),负责 RenderObject 树中的元素的尺寸,位置等计算
4. 绘制 RenderObject 树 (paint),绘制页面的像素信息
5. 浏览器主进程将默认的图层和复合图层交给 GPU 进程,GPU 进程再将各个图层合成(composite),最后显示出页面
- 关键资源的数量: 可能阻止网页首次渲染的资源。
- 关键路径长度: 获取所有关键资源所需的往返次数或总时间。
- 关键字节: 实现网页首次渲染所需的总字节数,等同于所有关键资源传送文件大小的总和。
优化 DOM
- 删除不必要的代码和注释包括空格,尽量做到最小化文件。
- 可以利用 GZIP 压缩文件。
- 结合 HTTP 缓存文件。
当前 VUE 项目更新
我理解的是: vue 属于单页面应用
webpack 打包后的 chunk 后面都会添加 hash 值 保证了文件的最新
但如果 index.html 文件发生了缓存
项目也还是旧的
只有保证 index.html 是最新的 整个项目才是最新的
因为是从这个 html 开始解析
所以 在这个文件里面添加
<!-- 禁止index 页面的缓存 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />
是保证这个页面禁止缓存
发新版之后的,只需要重新加载下当前项目
浏览器普通刷新就可
Vue 项目更新,浏览器不需强制刷新就可更新版本! 防止缓存相关推荐
- vue项目中浏览器兼容问题
vue项目中浏览器兼容问题 1.安装 npm install --save babel-polyfill npm install es6-promise --save 2.在main.js中引入(最好 ...
- 为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题 参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
- php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
- vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
- vue项目修改浏览器图标以及标题
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置, 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli ...
- Vue项目修改浏览器滚动条样式
Vue+Element组件修改浏览器滚动条样式 前言:在Vue项目中会有使用到滚动条的情况,但是会遇到原生滚动条的样式不满足UI设计,因此需要改变滚动条的样式,下面使用两种方式来修改滚动条的样式,以V ...
- vue项目中浏览器图标的设置
在vue项目中,我们怎样设置浏览器图标? 我们来看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.html的h ...
- VUE项目中使用this.$forceUpdate()强制页面重新渲染
在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,我是在使用多层v-for嵌套时出现这种问题的, 解决方法:运用 this.$force ...
- vue项目设置浏览器icon图标
1. 引入图标 在vue项目中的index.html中引入图标,为防止项目打包时图片路径出错,需把icon图标放在static静态文件夹下 <link rel="shortcut ic ...
- 去掉vue项目的浏览器图标
index.html <!-- 去掉vue项目默认图标 --><link rel="shortcut icon" href="#"/> ...
最新文章
- 基于内容的图像检索CBIR部分数据库和源代码资料
- php文本教学,php中文本操作的类
- linux中iptable中端口,Linux如何打开iptables中的端口
- make: 警告:检测到时钟错误。您的创建可能是不完整的。
- android studio背景模糊_[Android翻译]CameraX:过去、现在和未来的一瞥
- js 给服务器发消息,的Node.js:发送消息至服务器
- JavaScript函数—JavaScript闭包
- centos7 快速安装 mariadb(mysql)
- NN求解NS方程进一步探讨
- Android UI美化——颜色
- ss 过滤或者指定过滤
- u盘安装centos8黑屏_u盘centos7 安装 黑屏苹果电脑怎么安装win7系统还原
- Android androidx.startup:startup-runtime的minCompileSdk问题
- ARM与NEON加速指令
- ios客户端安全性问题分析及处理方式
- 【kali-漏洞利用】(3.4)免杀Payload 生成工具(下):Veil后门使用、监听失败原因
- php获取prepay_id时报错,微信支付获取prepay_id返回签名错误,官方demo中的签名方法MD5验证有问题...
- 如何通过脚本使Texture2D可读
- LeetCode 27 移除元素 题解
- 小区门禁卡可以复制到手机上吗_没有门禁卡怎么开门 门禁卡可以复制到手机里吗...