前端开发缓存问题的解决方案

在没有使用vue angular react 三大流行框架去开发静态的项目时,困扰我们最多的就是缓存问题,没有三大框架的优势之热刷新功能,如何做到我们修改了我们引用的外部文件里的某些内容,回到页面,刷新一下就能看到最新的效果或是样式呢?说的直白点就是动态的给文件加版本号,在没有接触php我是不知道如何用js去控制,为了安全,前端不具有改写文件的能力,我就想到了同样可以嵌套html内容的php语言,作为一个前端,懂点后端语言真的没坏事,不说废话了,上代码.

第一步:项目下面一定得有一个控制版本的php文件,version.php,内容如下:

 1 <?php
 2 /**
 3  * 
 4  * @authors shufei
 5  * @date    2018-06-17 12:15:27
 6  * @version $ver strtotime(date('Y-m-d H:i:s'))
 7  */
 8 function AutoVersion( $file ) {
 9     $ver = strtotime(date('Y-m-d H:i:s')) ;
10     echo $file .'?t=' .$ver;
11 }

这个 AutoVersion 方法需要一个参数也是文件的file路径 $file,版本号 $ver 赋值为实时的时间戳,当你项目的部分开发完成后可以设置 $ver为固定的一个值

第二步:将开发的html页面改为php页面,index.php

 1 <?php require_once "version.php";?>
 2 <!DOCTYPE html>  
 3 <html>  
 4 <head>  
 5     <meta charset="utf-8">  
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
 7     <meta name="viewport" content="width=device-width, initial-scale=1">  
 8     <meta name="Generator" content="EditPlus®">  
 9     <meta name="Author" content="">  
10     <meta name="Keywords" content="">  
11     <meta name="Description" content="">
12     <title>Document</title>  
13     <link href="<?php AutoVersion('test.css'); ?>" rel="stylesheet" type="text/css" >  
14     <script src="<?php AutoVersion('test.js'); ?>"></script>
15 </link>  
16 </head>  
17 <body>  
18     <h1>Hello,world!</h1>  
19 </body> 
20 </html>

<?php require_once "version.php";?>表示依赖 version.php文件,因此 <?php AutoVersion('test.css'); ?>和<?php AutoVersion('test.js'); ?>都会被替换成原有的文件路径
加版本号,如果 version.php 里的$ver是实时时间戳,那么test.js 或者 test.css文件里有任何修改,刷新一下都是最新的,没有缓存顾虑,再也不用手动的去耗时耗力的操作每个文件夹了

如果你还想要热刷新那种差不多的功能,哪就在你的开发页面index.php里head里加上 <meta http-equiv="refresh" content="3"> ,页面3秒自动刷新一次,同时文件也是最新的,css或js里的代码
一旦被修改页面自动刷新展示最新的页面和效果,缺点嘛,你懂得,就是需要看dom结构,3秒一刷新,控制台element里看dom结构就重置了,是不是心想算了,还是不偷懒了,自己手动刷新一次又怎么了,不影响你
的美丽动容

个人摸索出来的方法,没有接触PHP,如有问题请留言

前端开发缓存问题的解决方案

猜你喜欢