Vue3 + TS 自动检测线上环境 —— 版本热更新提醒

  前期回顾f8e3cc1a0f694ac2b665ca2ad14c49d7.png

编写 loading、加密解密 发布NPM依赖包,并实施落地使用_彩色之外的博客-CSDN博客

目录

  问题产生

 性能效率

 新建 autoUpdate.ts 

  在App.vue使用


  问题产生

        当用户在当前站点停留时间比较长,中途站点进行升级更新之后,用户如果不刷新页面就任然停留在旧的页面里,如何让用户收到一个提示,引导用户进行更新操作呢? 

 性能效率

Vue3 + TS 自动检测线上环境 —— 版本热更新提醒_第1张图片

         本文仅仅简单介绍了实现线上更新的一种思路,相比在生产环境下实现热更新,或者是使用websocket相对来说都是比较麻烦的,而且还需要改动服务器,这种做法只需要一小段js函数即可解决,并且效率也是非常高的,对整个系统的运行,基本上是没有任何负面影响,因为单页面模式下,每次请求的页面实际上传输的数据非常少,所以20秒一次,完全不会给站点增加负荷。

在线上环境中,自动刷新页面可能会带来一些资源性能问题,具体取决于以下几个因素:

1. 刷新频率:代码中使用了 `setTimeout` 定时调用 `needUpdate` 函数来判断是否需要更新页面,刷新频率由 `DURATION` 变量决定。如果刷新频率设置得太高,比如每秒钟都刷新一次,会增加服务器和客户端的负载,可能导致性能问题。

2. 脚本文件数量:如果页面中的脚本文件数量很多,每次刷新都需要重新加载和解析这些脚本文件,会增加网络请求和浏览器的 CPU 使用量,可能导致页面加载速度变慢和性能下降。

3. 脚本文件大小:如果页面中的脚本文件大小很大,每次刷新都需要下载这些大文件,会增加网络请求的时间和带宽消耗,可能导致页面加载速度变慢和性能下降。

为了减少资源性能问题,可以考虑以下几点:

1. 调整刷新频率:根据实际情况,合理设置刷新频率,避免过于频繁的刷新。

2. 使用缓存:在服务器端设置适当的缓存策略,使得脚本文件能够被客户端缓存起来,减少重复下载和解析的次数。

3. 优化脚本文件:对脚本文件进行合并、压缩等优化操作,减小文件大小,提高加载速度。

4. 使用增量更新:如果可以,可以只更新发生变化的脚本文件,而不是每次都重新加载全部脚本文件。

综上所述,虽然自动刷新页面可能会带来一些资源性能问题,但通过合理的设置和优化,可以减少这些问题的发生和影响。在实际应用中,需要根据具体情况进行评估和优化。

 新建 autoUpdate.ts 

import { ElMessageBox } from 'element-plus';

let lastScripts: string[] = [];

/* 获取html中script标签的src属性值 */
async function extractNewScripts(html: string): Promise {
	const scriptReg = /[^"']+)/gm;
	const result: string[] = [];
	let match;
	while ((match = scriptReg.exec(html))) {
		result.push(match.groups?.src ?? '');
	}
	return result;
}

/* 判断浏览器是否需要更新数据 */
async function needUpdate(): Promise {
	const newScripts = await extractNewScripts(await fetch('/').then((resp) => resp.text()));
	if (!lastScripts.length) {
		lastScripts = newScripts;
		return false;
	}
	if (newScripts.length !== lastScripts.length) {
		lastScripts = newScripts;
		return true;
	}
	for (let i = 0; i < lastScripts.length; i++) {
		if (lastScripts[i] !== newScripts[i]) {
			lastScripts = newScripts;
			return true;
		}
	}
	return false;
}

/* 延时时间20s */
const DURATION = 20 * 1000;

/* 自动刷新 */
export const autoRefresh = (): void => {
	setTimeout(async () => {
		const willUpdate = await needUpdate();
		if (willUpdate) {
			ElMessageBox.confirm('页面有更新,点击确定刷新页面?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					location.reload();
				})
				.catch(() => {});
		} else {
			autoRefresh(); // 如果不需要更新数据,继续执行下一次判断
		}
	}, DURATION);
};

  在App.vue使用

import { autoRefresh } from '/@/utils/autoUpdate';
onMounted(() => {
	nextTick(() => {
		if (import.meta.env.MODE !== 'development') autoRefresh();
	});
});

这样当项目通过ci cd部署版本更新时候,用户就会收到更新提示

Vue3 + TS 自动检测线上环境 —— 版本热更新提醒_第2张图片

全文结束,所有代码都在文中。

7730e2bd39d64179909767e1967da702.jpeg

 _______________________________  期待再见  _______________________________ 

你可能感兴趣的:(vite,vue3,ts,前端,热更新)