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 页面的缓存 --

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值