👨‍💻全栈-让前端调试不受本地缓存束缚,实时更新缓存

在全栈设计开发的路上就像西天取经,刚开始也就像见过什么世面一样,就是后面陆续各种妖孽,小魔小怪的也就嘿咻嘿咻的跑出来,搞得我研究斗智斗勇。也许后续我该把全栈经历写成一个集合方便分享。

近期写了为了调试而 关闭 PHP 缓存的方法,测试环境关闭了之后,效率果然快好多,最起码不用老去手删,或者干等着。

前端 CSS 和 JS 的调试也同样会产生缓存,但这些都是生成在本地的,也是手动删除,每次那个心累。

解决问题

前端页面调试过程中 CSS 和 JS 减少刷新缓存的次数

解决办法

调试环境里,一般使用实时地 CSS 、JS 文件名加随机参数实现,让浏览器实时拉取「全新不同」的 css 文件,格式类似:style.css?time=0.4532025633957022

CSS 文件

1
2
3
<script>
document.write("<link rel='stylesheet' href='./src/styles/main.css?time="+Math.random()+"'>");
</script>

JS文件

1
2
3
<script>
document.write("<script type='text/javascript' src='./src/scripts/video.js?time="+Math.random()+"'></"+"script"+">")
</script>

这样就可以实时加载最新的 CSS、JS 文件了👌。

再也不用老按快捷键了~~

另外生产环境里,CSS 、JS 文件后面带一个版本号之类的,就好可追溯调试也方便识别。

格式类似:style.css?v=6.2.1.822

参考文章

解决每次上线更新文件需要手动清除缓存的问题——-js 、css自动清除浏览器缓存方法