1. 程式人生 > >如何解決瀏覽器快取

如何解決瀏覽器快取

你是否遇到過:改了css,改了js,替換了圖片,但是沒有生效的情況呢?

這個問題其實是瀏覽器快取了css,js,和圖片所造成的

解決方案:

1:如果你是前後端分離的開發模式,那麼使用webpack等打包工具生成md5就可以解決了,這個方案是目前的主流方法。

但是,現在還存在大部分並非是前後端分離的專案需要我們維護

那麼,我們可以通過使用一些指令碼語言來動態改變對應url的版本號來解決

貼上php程式碼:

<?php
/* 
Creat by xiaolu289 2017/9/7 11:19
該指令碼解決更換圖片後瀏覽器還是舊圖片的問題
*/
$baseDir = __DIR__;
$publicDir = "{$baseDir}/Public";
$viewDir = "{$baseDir}/Application/Home/View";
$cssDirs = array(
"{$publicDir}/css",
"{$publicDir}/mobile/css",
);
$imgReg = "/([\w-]+\.(?:png|jpg|gif))(?:\?[\w]+=[\w]+)?/";
$cssReg = "/([\w-]+\.(?:css))(?:\?[\w]+=[\w]+)?/";
$VERSION = time();
/* 
佇列方式遍歷資料夾
參考連結:http://blog.csdn.net/nuli888/article/details/52144752
*/
function read_dir_queue($dir){
    $files=array();
    $queue=array($dir);
    while($data=each($queue)){
        $path=$data['value'];
        if(is_dir($path) &&$handle=opendir($path)){
            while($file=readdir($handle)){
                if($file=='.'||$file=='..')
                    continue; 
                $files[] = $real_path=$path.'/'.$file;
                if (is_dir($real_path))
                    $queue[] = $real_path;
            } 
        } 
        closedir($handle);
    } 
    return $files;
}
// 遍歷所有css目錄
foreach($cssDirs as$item){
    $cssFiles = read_dir_queue($item);
    foreach($cssFiles as$item){
        if(is_file($item)){
        // 設定版本號
        $fileContent=file_get_contents($item);
        file_put_contents($item,preg_replace($imgReg,"$1?v={$VERSION}",$fileContent));
        }
    }
}
// 遍歷view目錄
$viewFiles=read_dir_queue($viewDir);
foreach($viewFiles as$item){
    if(is_file($item)){
        // 設定版本號
        $fileContent=file_get_contents($item);
        $fileContent=preg_replace($imgReg,"$1?v={$VERSION}",$fileContent);
        file_put_contents($item,preg_replace($cssReg,"$1?v={$VERSION}",$fileContent));
    }
}