有时候我们会碰到这样一个问题:明明已经更改了CSS、JS问题,当时上传到正式环境时,刷新后还是没有看到我们预想中的效果。这时候不得不Ctrl + F5强制刷新浏览器的缓存才能够解决这个问题。但是如果这个问题发生在客户身上呢?总不能在网站上贴个告示让客户Ctrl + F5吧?这时候我们就需要给CSS、JS文件添加版本号。这样子每当更新过这个文件后,浏览器就不会加载缓存到的文件,这个问题也就解决了。

重写Mage_Page_Block_Html_Head文件中的_prepareStaticAndSkinElements方法:

foreach ($staticItems as $params => $rows) {
    foreach ($rows as $name) {
        $items[$params][] = $mergeCallback ? Mage::getBaseDir() . DS . 'js' . DS . $name : $baseJsUrl . $name .'?v='.filemtime(Mage::getBaseDir() . DS . 'js' . DS . $name);
    }
}

foreach ($skinItems as $params => $rows) {
    foreach ($rows as $name) {
        $items[$params][] = $mergeCallback ? $designPackage->getFilename($name, array('_type' => 'skin'))  : $designPackage->getSkinUrl($name, array()).'?v='.filemtime($designPackage->getFilename($name, array('_type' => 'skin')));
    }
}

这里以文件最后的修改时间为版本号,每当文件被修改时版本号改变,浏览器需要重新发起请求读取文件而不是读取缓存中的文件。

国外一个介绍合并CSS、JS后添加版本号的方法: http://smith-web.net/2013/02/09/magento-css-auto-versioning/

整个思路是:循环获取每个css文件最后的修改时间,取最大的修改时间,然后加在合并文件名称的后面,这样子每当有文件被修改时,文件名称就会发生变化,就会重新生成文件,这样子就能使浏览器获取到最新的修改文件而不是仍读取缓存中的文件。

results matching ""

    No results matching ""