javascript - GZIPping 和缓存我的 JS 和 CSS 文件

Question

我正在使用SMARTY PHP TEMPLATE ENGINE、Apache 2和PHP 5.3.3。这是我原来的 main.js 文件内容

// Functions
(function($){
    var url1 = /(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,
    url2 = /(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/g,
    linkifyThis = function () {
        var childNodes = this.childNodes,
        i = childNodes.length;
        while(i--)
        {
            var n = childNodes[i];
            if (n.nodeType == 3) {
                var html = $.trim(n.nodeValue);
                if (html)
                {
                    html = html.replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(url1, '$1<a href="http://$2" target="_blank">$2</a>$3')
                    .replace(url2, '$1<a href="$2" target="_blank">$2</a>$5');
                    $(n).after(html).remove();
                }
            }
            else if (n.nodeType == 1  &&  !/^(a|button|textarea)$/i.test(n.tagName)) {
                linkifyThis.call(n);
            }
        }
    };
    $.fn.linkify = function () {
        return this.each(linkifyThis);
    };
})(jQuery);

function openCenteredWindow(url, height, width, name, parms) {
   var left = Math.floor( (screen.width - width) / 2);
   var top = Math.floor( (screen.height - height) / 2);
   var winParms = "top=" + top + ",left=" + left + ",height=" + height + ",width=" + width;
   if (parms) { winParms += "," + parms; }
   var win = window.open(url, name, winParms);
   if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
   return win;
}

但是当我在浏览器上浏览我的 js 文件（http://domain.com/js/main.js）时，它是这样的：

(function($){var url1=/(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,url2=/(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/g,linkifyThis=function(){var childNodes=this.childNodes,i=childNodes.length;while(i--)
{var n=childNodes[i];if(n.nodeType==3){var html=$.trim(n.nodeValue);if(html)
{html=html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(url1,'$1<a href="http://$2" target="_blank">$2</a>$3').replace(url2,'$1<a href="$2" target="_blank">$2</a>$5');$(n).after(html).remove();}}
else if(n.nodeType==1&&!/^(a|button|textarea)$/i.test(n.tagName)){linkifyThis.call(n);}}};$.fn.linkify=function(){return this.each(linkifyThis);};})(jQuery);function openCenteredWindow(url,height,width,name,parms){var left=Math.floor((screen.width- width)/2);var top=Math.floor((screen.height- height)/2);var winParms="top="+ top+",left="+ left+",height="+ height+",width="+ width;if(parms){winParms+=","+ parms;}
var win=window.open(url,name,winParms);if(parseInt(navigator.appVersion)>=4){win.window.focus();}
return win;}

这就像 GZIPPED，删除换行符和注释行。现在我在main.js文件中添加一些内容。现在main.js的原始内容是这样的：

// Functions
(function($){
    var url1 = /(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,
    url2 = /(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/g,
    linkifyThis = function () {
        var childNodes = this.childNodes,
        i = childNodes.length;
        while(i--)
        {
            var n = childNodes[i];
            if (n.nodeType == 3) {
                var html = $.trim(n.nodeValue);
                if (html)
                {
                    html = html.replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(url1, '$1<a href="http://$2" target="_blank">$2</a>$3')
                    .replace(url2, '$1<a href="$2" target="_blank">$2</a>$5');
                    $(n).after(html).remove();
                }
            }
            else if (n.nodeType == 1  &&  !/^(a|button|textarea)$/i.test(n.tagName)) {
                linkifyThis.call(n);
            }
        }
    };
    $.fn.linkify = function () {
        return this.each(linkifyThis);
    };
})(jQuery);

function openCenteredWindow(url, height, width, name, parms) {
   var left = Math.floor( (screen.width - width) / 2);
   var top = Math.floor( (screen.height - height) / 2);
   var winParms = "top=" + top + ",left=" + left + ",height=" + height + ",width=" + width;
   if (parms) { winParms += "," + parms; }
   var win = window.open(url, name, winParms);
   if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
   return win;
}

$(document).ready({

    /*

    -webkit-border-bottom-left-radius: 0px !important;
    -moz-border-radius-bottomleft: 0px !important;
    border-bottom-left-radius: 0px !important;

    */

    /*  dropdown sub-menu control
    ***************************/

    var leftItemSub = $('.loginbarLeftItem').find('ul');
    var rightItemSub = $('.loginbarRightItem').find('ul');
    if(leftItemSub.length){
        leftItemSub.parent().css({
            '-webkit-border-bottom-left-radius': '10px !important',
            '-moz-border-radius-bottomleft': '10px !important',
            'border-bottom-left-radius': '10px !important'
        });
    }
    if(rightItemSub.length){
        rightItemSub.parent().css({
            '-webkit-border-bottom-left-radius': '10px !important',
            '-moz-border-radius-bottomleft': '10px !important',
            'border-bottom-left-radius': '10px !important'
        });
    }
});

但是当我在浏览器上浏览到我的main.js文件时，它是相同的（没有新行，也没有新添加的内容）

(function($){var url1=/(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,url2=/(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/g,linkifyThis=function(){var childNodes=this.childNodes,i=childNodes.length;while(i--)
{var n=childNodes[i];if(n.nodeType==3){var html=$.trim(n.nodeValue);if(html)
{html=html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(url1,'$1<a href="http://$2" target="_blank">$2</a>$3').replace(url2,'$1<a href="$2" target="_blank">$2</a>$5');$(n).after(html).remove();}}
else if(n.nodeType==1&&!/^(a|button|textarea)$/i.test(n.tagName)){linkifyThis.call(n);}}};$.fn.linkify=function(){return this.each(linkifyThis);};})(jQuery);function openCenteredWindow(url,height,width,name,parms){var left=Math.floor((screen.width- width)/2);var top=Math.floor((screen.height- height)/2);var winParms="top="+ top+",left="+ left+",height="+ height+",width="+ width;if(parms){winParms+=","+ parms;}
var win=window.open(url,name,winParms);if(parseInt(navigator.appVersion)>=4){win.window.focus();}
return win;}

CSS文件也有同样的问题。GZIPing 和缓存我的 JS 和 CSS 文件。但我找不到它。我试过了CTRL+F5

有任何想法吗？

注1

/js 和 /css 文件夹上没有.htaccess文件。但是根文件夹上有一个 .htaccess 。

options -multiviews
<IfModule mod_rewrite.c>
RewriteEngine On 
RewriteBase /
RewriteRule ^users$ users.php
RewriteRule ^categories/([^/.]+)?$ cat.php?cid=$1&%{QUERY_STRING}
RewriteRule ^user/([^/.]+)?$ user.php?uname=$1&%{QUERY_STRING}
RewriteRule ^tags/([^/.]+)/([^/.]+)?$ tags.php?cid=$1&tag=$2&%{QUERY_STRING}
RewriteRule ^([^/.]+)/([^/.]+)/([^/.]*)?$ view.php?title=$1&id=$2&%{QUERY_STRING}
</IfModule>
<IfModule mod_security.c> 
   # Turn off mod_security filtering. 
   SecFilterEngine Off 

   # The below probably isn't needed, 
   # but better safe than sorry. 
   SecFilterScanPOST Off 
</IfModule>

笔记2

当我浏览到main.js?(randomnumbers)( like main.js?345458) 时，我可以看到新版本。但仍然没有注释行和新行。

score 1 · Accepted Answer

我的猜测是在网络服务器上安装了类似https://developers.google.com/speed/pagespeed/mod的东西。

当您请求http://domain.com/js/main.js?cachebuster=somethingrandom以（希望）强制使用真正新鲜的 main.js 版本时会发生什么？

更新：在评论中阅读更改 url 参数将为您提供一个新版本，它很可能是某个地方的代理，无论是在您自己的服务器上还是在其他地方。

score 0 · Accepted Answer

我注意到，CloudFlare 已为我的域激活。CloudFlare会自动缓存/GZIPing我的js/css文件。我停用它并解决了我的问题。

谢谢你。

javascript - GZIPping 和缓存我的 JS 和 CSS 文件

2 回答 2

Related

Reference