history,hash缓存那些事

vue-router 中的 createWebHistory,createWebHashHistory两种模式

createWebHistory

是基于 window.history 对象是HTML5提供的用于维护当前标签页浏览历史的对象,主要功能是前进后退和在不刷新页面的情况下,修改地址栏里的URL地址。history 模式就是利用了 HTML5 historyAPI,所以也叫 HTML5 模式,Vue Router 中是用 createWebHistory() 创建。地址发生变化 都会出现404 而404 会在服务器上映射到index.html中,重新请求资源!

createWebHashHistory

是用 createWebHashHistory() 创建,hash指的是地址中 # 号以及后面的字符,这个 # 就是hash符号,中文名叫哈希符或锚点,哈希符后面的值,我们称之为哈希值!我们虽然在访问的过程,在 URL 会出现#,但是此方式不会抱憾在HTTP的请求中,所以对服务器没有任何影响,因为此方式不经过服务器,所以url的hash的改变不会重新加载页面,所以如果第一次加载完html 之后在后面操作都会出现,不会是最新的资源的情况!但是这中对SEO也有影响!

缓存

为了后面更好的归类,这里我把缓存分为两类,一类是静态资源,不管是图片 js css 等等 只要是打包生成出来的统一叫静态资源,第二种就是动态的 也就是我们在请求服务器的接口动态处理dom 填补动态数据!

动态资源缓存问题

不难看出,就是请求的url被缓存啦,其实也好好处理,前端项目基本都是统一的请求器,直接在请求器上统一拦截,url上加上时间戳后缀!这样保证每次url 不是相同的,这个在以前的项目中 ,客户用的ie浏览器,get请求 都被缓存,这个貌似是IE的特殊性的坑!当时就通过时间戳的形式处理!如果没有统一的请求器的,要么一个一个改,要么写个xhr去处理!

静态资源缓存问题

无论createWebHistory,createWebHashHistory的哪一种打包生成的一些静态资源做一次文件签名即可,vite.config.js配置处理,这样处理每次打包都会变更js的文件名,默认的只会改动变更的文件,

  build: {hash: true,manifest: true,rollupOptions: {output: {// 入口文件名entryFileNames: `assets/[name].${timeStamp}.js`,// 块文件名chunkFileNames: `assets/[name]-[hash].${timeStamp}.js`,// 资源文件名 css 图片等等assetFileNames: `assets/[name]-[hash].${timeStamp}.[ext]`,},},}

nginx 上禁止缓存html

        location = /index.html {root /Volumes/wanglaibin/work/vite-project/dist;expires 0;add_header Cache-Control "no-cache, no-store, must-revalidate";}

index.html 上禁止html

<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">

上面的配置,无关createWebHistory,createWebHashHistory,因为只要重新加载html都会请求最新的资源,只是createWebHistory相对友好,因为每次地址变更都会请求都会经过服务器,而createWebHashHistory只有在第一次加载或者F5刷新才会请求资源。

针对createWebHashHistory的缓存方式

该方式如何处理,我们都知道,每次url地址变更没有经过服务器,所以才造成一个后面所有操作都会以第一次的加载html资源做处理,后面发布变,前端在方式过程中,只要不发生重载html的操作,都会出现请求旧的资源,如果没有访问过资源,可能出现找不到资源的情况!

我们知道这个造成的原因,所以我们通过某种方式,来告知相应的版本更新,做一次资源的重新加载!所以我们只能从路由的钩子上做处理,当我们路由变更时,请求前端的某个资源文件,记录当前的hash值,每次变更跟客户端做相应的比较,如果不一致,直接通知用户,当前系统版本升级,需要重新加载!之后重载整个html的入口!目前两种方式可以处理:

第一种在 vite中的异常事件中处理,在vite加载动态导入失败时,会触发 vite:preloadError 事件,所以我们监听这个错误事件,不过这种如果以前缓存过文件,改方式也不会出发最新的操作

window.addEventListener('vite:preloadError', (event) => {console.log('检测到有新版本,5秒后即将刷新...');// 更好的用户体验 可以做个tipssetTimeout(() => {window.location.reload(true) // 例如,刷新页面console.log('页面已更新为最新版本...');}, 5000)
})

第二种在 打包的过程中,我们生成相应的json文件信息,在路由的请求的钩子上处理,每次路由变更请求对比版本变化来决定是否做一个重载url;
在vite.config.js中编写插件生成相应的json文件

import { fileURLToPath, URL } from 'node:url'
import upgradePlugin from './version-upgrade-plugin'
...
const timeStamp = new Date().getTime();
// https://vitejs.dev/config/
export default defineConfig({define: {__APP_VERSION__: timeStamp,},plugins: [...upgradePlugin({version: timeStamp})],...build: {hash: true,manifest: true,rollupOptions: {output: {// 入口文件名entryFileNames: `assets/[name].${timeStamp}.js`,// 块文件名chunkFileNames: `assets/[name]-[hash].${timeStamp}.js`,// 资源文件名 css 图片等等assetFileNames: `assets/[name]-[hash].${timeStamp}.[ext]`,},},}
})

version-upgrade-plugin.js

export default (options) => {let configreturn {name: 'version-upgrade',configResolved(resolvedConfig) {// 存储最终解析的配置config = resolvedConfig},async buildStart() {console.log('')console.log('生成项目文件信息')const fs = await import('fs').then((module) => module.default);const path = await import('path').then((module) => module.default)// 生成版本信息文件路径const file = config.publicDir + path.sep + 'version.json'// 这里使用编译时间作为版本信息const content = JSON.stringify({ version: options.version })if (fs.existsSync(config.publicDir)) {writeVersion(file, content)} else {fs.mkdir(config.publicDir, (err) => {if (err) throw errwriteVersion(file, content)})}console.log(config, file)}}
}const writeVersion = async (versionFile, content) => {const fs = await import('fs').then((module) => module.default);// 写入文件fs.writeFile(versionFile, content, 'utf8', (err) => {if (err) throw err})
}

路由上处理

router.afterEach(async () => {await isHeavyLoadPage();
});function isHeavyLoadPage() {if (process.env.NODE_ENV === 'development') returnfetch(`version.json?t=${Date.now()}`).then(res => res.json()).then(data => {console.log(data)if (__APP_VERSION__ !== data.version) {alert(__APP_VERSION__, data.version)setTimeout(() => {window.location.reload(true) // 例如,刷新页面console.log('页面已更新为最新版本...');}, 5000)}}).catch(function (e) {console.log(e)})}

其实我们做项目找到问题的本质,从本质上找相应的解决方案进行处理,才不会无任何头绪!也不至于没有任何方向!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/47896.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCP/IP八连问

目录 1. 基础概念2. 网络层&#xff08;IP协议&#xff09;3. 传输层&#xff08;TCP和UDP&#xff09;4. 应用层5. 网络安全6. 网络故障诊断7. 高级主题8. 问题解决能力 1. 基础概念 问题: 请解释TCP/IP协议是什么&#xff1f; 答案: TCP/IP协议是互联网通信的基础协议&#x…

“微软蓝屏”事件:网络安全问题的深刻暴露

“微软蓝屏”事件&#xff1a;网络安全问题的深刻暴露 前言 在2024年7月19日&#xff0c;全球范围内发生了一起由微软视窗&#xff08;Windows&#xff09;操作系统引发的蓝屏死机&#xff08;Blue Screen of Death, BSOD&#xff09;事件。此次事件不仅影响了数百万台Window…

《系统架构设计师教程(第2版)》第12章-信息系统架构设计理论与实践-04-信息系统架构设计方法-信息化总体架构方法

文章目录 1. 信息化概述1.1 信息化1.2 国家信息化1.3 信息化的内涵1.4 品牌信息化建设1.5 信息化特征1.5.1 易用性1.5.2 健壮性1.5.3 平台化、灵活性、拓展性1.5.4 安全性1.5.5 门户化、整合性1.5.6 移动性 2. 信息化工程建设方法2.1 信息化架构模式2.1.1 数据导向架构2.1.2 流…

Pandas包与Numpy包区别

文章目录 一、设计目的与核心功能二、数据结构三、性能与灵活性四、应用场景 Pandas包与Numpy包在数据处理和分析方面各有特点和优势&#xff0c;它们之间的主要区别可以归纳如下&#xff1a; 一、设计目的与核心功能 Numpy&#xff1a; 设计目的&#xff1a;Numpy是Python的一…

Policy-GNN

Policy-GNN代码解析 一、dqn_agent_pytorch.py二、train_citeseer.py三、train_cora.py四、gcn.py 一、dqn_agent_pytorch.py 这个文件实现了一个基于深度Q学习的智能体DQNAgent。代码使用PyTorch来定义和训练深度神经网络&#xff0c;估计状态-动作值。 主要组成部分包括&am…

TQSDRPI开发板教程:实现PL端的UDP回环与GPSDO

本教程将完成一个全面的UDP运行流程与GPSDO测试&#xff0c;从下载项目的源代码开始&#xff0c;通过编译过程&#xff0c;最终将项目部署到目标板卡上运行演示。此外&#xff0c;我们还介绍如何修改板卡的IP地址&#xff0c;以便更好地适应您的网络环境或项目需求。 首先从Gi…

Unity UGUI 之 ScrollBar与ScrollView

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 1.什么是ScrollBar 滚动块&#xff1a;Unity - Manual: Scrollbar 2.重要参数 该笔记来源…

java用freemarker导出word

freemarker导出word 第一步、将word转换为xml格式第二步、将转换后的xml文件修改后缀为ftl后复制到项目 resources 目录下&#xff08;可以自己新建一个文件夹放在文件夹中&#xff09;第三步、格式化xml代码&#xff08;如果问价太大可能会无法格式化&#xff09;这时候需要在…

微软CrowdStrike驱动蓝屏以及内核签名

原因 当Windows操作系统遇到严重错误导致系统崩溃时&#xff0c;屏幕显示为蓝色&#xff0c;通常伴有错误代码和信息&#xff0c;这被称为“蓝屏死机”&#xff08;Blue Screen of Death&#xff0c;简称BSOD&#xff09; https://www.thepaper.cn/newsDetail_forward_281262…

Unity中UI系统3——UGUI

概述 基础知识 UGUI基础 六大基础组件 Canvas——渲染模式控制组件 Canvas Scaler —— 分辨率自适应组件 CanvasScaler——恒定像素模式 CanvasScaler——缩放模式 可以适当的自己去了解对数 CanvasScaler——恒定物理模式 CanvasScaler —— 3D模式 Graphic Raycaster——射线…

RabbitMQ的学习和模拟实现|muduo库的介绍和使用

muduo库 项目仓库&#xff1a;https://github.com/ffengc/HareMQ muduo库 muduo库是什么快速上手搭建服务端快速上手搭建客户端上面搭建的服务端-客户端通信还有什么问题?muduo库中的protobuf基于muduo库中的protobuf协议实现一个服务器 muduo库是什么 Muduo由陈硕大佬开…

人工智能与机器学习原理精解【3】

文章目录 泰勒级数逼近基础一阶导数和二阶导数的几何意义一阶导数的几何意义二阶导数的几何意义应用示例 导数与微分的区别1. 定义与本质2. 几何意义3. 表达式与关系4. 应用场景 可微函数定义几何意义性质例子 导数导数的定义导数的计算导数的几何意义导数函数的图像一、常见导…

在Ubuntu上部署Zerotier IPV6网络

今天我们将在阿贝云提供的免费服务器上,部署并优化一个Zerotier网络,支持IPV6。阿贝云确实提供了不错的免费云服务器,1核CPU、1G内存、10G硬盘、5M带宽,完全可以满足我们的部署需求。接下来让我们一起看看如何在Ubuntu上安装和配置Zerotier吧。 Zerotier是一个非常出色的虚拟网…

数据编织 VS 数据仓库 VS 数据湖

目录 1. 什么是数据编织?2. 数据编织的工作原理3. 代码示例4. 数据编织的优势5. 应用场景6. 数据编织 vs 数据仓库6.1 数据存储方式6.2 数据更新和实时性6.3 灵活性和可扩展性6.4 查询性能6.5 数据治理和一致性6.6 适用场景6.7 代码示例比较 7. 数据编织 vs 数据湖7.1 数据存储…

前端性能优化面试题汇总

面试题 1. 简述如何对网站的文件和资源进行优化? 参考回答&#xff1a; 举列&#xff1a; 1.文件合并&#xff08;目的是减少http请求&#xff09;&#xff1a;使用css sprites合并图片&#xff0c;一个网站经常使用小图标和小图片进行美化&#xff0c;但是很遗憾这些小图片…

文献检索。

* 号代表通配符。 参考视频&#xff1a; 武汉科技大学图书馆信息素养微课程--EI数据库的检索与利用_哔哩哔哩_bilibili &#xff08;讲了爱斯维尔的检索方法&#xff0c;以及期刊选刊查找&#xff09; 【图情专场】文献检索课中的Web of Science_在线大讲堂_哔哩哔哩_bilib…

证书上的服务器名错误解决方法

方法 win r &#xff0c;输入mmc 点击文件——>添加/删除管理单元 找到证书——> 添加 根据自己的存放选择存放位置 点击控制台根节点——> 受信任的根证书颁发机构——>导入 若还出现问题&#xff0c;则参考https://blog.csdn.net/mm120138687/article/details/…

环境收集 开始阶段

预攻击阶段 渗透测试信息搜集总结 > 确定要攻击的网站后&#xff0c;用whois工具查询网站信息注册时间&#xff0e;管理员联系方式&#xff08;电话、邮箱.&#xff09; 2&#xff1a;使用nslookup、dig工具进行域名解析已得到IP地址。 &#xff1e;3&#xff1a;查询得…

go-kratos 学习笔记(2) 创建api

proto 声明SayHi 先删除go.mod 从新初始化一下 go mod init xgs_kratosgo mod tidy 编辑 api/helloword/v1/greeter.proto 新声明一个方法 rpc SayHi (HelloHiRequest) returns (HelloHiReply) {option (google.api.http) {post: "/hi"body: "*"};} …

SpringCloud 环境工程搭建

SpringCloud 环境&工程搭建 文章目录 SpringCloud 环境&工程搭建1. SpringCloud介绍2. 服务拆分原则2.1 单一职责原则2.2 服务自治2.3 单向依赖2.4 服务拆分示例 3. 数据准备4. 工程搭建4.1 创建父工程4.2 创建子工程4.2.1 子项目-订单服务4.2.2 子项目-商品服务 4.3 完…