前端開發緩存問題的解決方案
阿新 • • 發佈：2018-06-17
col 功能 設置 影響 DG css dev 使用 head
在沒有使用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,如有問題請留言
前端開發緩存問題的解決方案