飞道科技

飞道科技文档总汇

项目打包更新需要清理缓存?

现象描述

在项目更新时,如果不清除浏览器缓存的话,经常会出现验证码出不来的现象,这个时候手动清除一下缓存,就正常了。

原因分析

浏览器会使用缓存策略,在一段时间内会自动使用已经下载过的文件(即缓存,而不去发出请求),这一策略能够加快页面的加载速度,用户体验非常好,但是正因为这样,在项目更新的时候浏览器还不知道有些东西已经更新过了,需要使用最新的内容,这个时候,我们可以使用一些技巧,使浏览器认为一些静态资源是新的才可以。

解决办法

在get请求地址后面加上一个随机数是一个不错的解决方法。这里只列出验证码和项目js文件的更新策略,其它如有类似,可以使用同样的策略

验证码:

<img src='./captcha?v=20190104102637' />

这里的v=20190104102637应该每次都不一样,这里说的“每次”是指每一次验证码的刷新,包括整个页面的刷新以及点击验证码的刷新操作。最简单的一个方法,可以使用 Math.random()替代20190104102637

js文件,位于(n.ts)中:

<script src="./js/feidao.js?v=20190104102637"></script>
<script type="text/javascript">
	window.addEventListener('WebComponentsReady', function () {
		var t = document.createElement('script');
		t.src = './js/login.js?v=20190104102637';
		document.head.appendChild(t);
	});
</script>

需要指出的是,并非所有js文件每次打包都需要添加随机数,只有项目上我们开发人员开发出来的js文件(目前就只有上面列出的两个)才需要。