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

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

近期写了为了调试而 关闭 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自动清除浏览器缓存方法