Question

我注意到minifier对原型javascript没有那么好，因为如果他们从这开始就不替换任何方法或属性。例如：

// unoptimized 182 bytes
myClass.prototype.myFunction = function(){
    this.myElementDom.style.backgroundColor='#000';
    this.myElementDom.style.color='#FFF';
    this.myElementDom.style.borderColor='#DDD';
}

// 168 bytes = 92% of unoptimized, YUI compressed
myClass.prototype.myFunction=function(){this.myElementDom.style.backgroundColor="#000";this.myElementDom.style.color="#FFF";this.myElementDom.style.borderColor="#DDD"};

// optimized 214 bytes
// set a replaceable local scope variable and reduce 2 variable 
// lookups at the same time
// file-size in the development version doesn't matter, so we can even increase it 
// to preserve readability
myClass.prototype.myFunction = function(){
    var myElementDomStyle = this.myElementDom.style
    myElementDomStyle.backgroundColor='#000';
    myElementDomStyle.color='#FFF';
    myElementDomStyle.borderColor='#DDD';
}

// 132 bytes = 72.53% of unoptimized, YUI compressed
myClass.prototype.myFunction=function(){var a=this.myElementDom.style;a.backgroundColor="#000";a.color="#FFF";a.borderColor="#DDD"};

Hurray，19.47％已保存... NOT ...在发布启用了gzip的脚本时，未经优化的YUI压缩版本加载了130个字节（=未优化的71.42％），显然比优化的YUI节省了更多的成本压缩版本有134字节（=未经优化的73.63％）...在考虑压缩如何工作后可能是显而易见的，但现在要走了吗？首先使用微优化和较小的压缩来证明使用gzip可以实现更大的文件大小...因为您可以通过这种优化轻松地使代码的可读性和可维护性降低。

根据http://refresh-sf.com/yui/

的所有信息

Answer 1

代码可读性不应该进入它 - 你应该只在生产服务器上缩小并开发未缩小的代码。不要微观优化您的变量和函数名称，您几乎肯定会牺牲代码可读性，几乎零可用性 - 您正在谈论一个文件的几KB，它将被下载一次并缓存。

至于是否缩小和gzip或只是gzip - 做任何产生较小的整体文件大小。

Answer 2

无论如何，182字节的代码不会缩小或压缩太多。通过消除空格来实现缩小 - 在五行代码中只有16个字节 - 并缩短函数，变量和属性名称，在这种情况下，由于范围的原因，它无法做到。压缩通过查找重复序列并消除它们来工作。在你的五行代码中根本没有足够的文本来重复发现。

尝试缩小和压缩50行或100行或更多行代码，您会看到更引人注目的结果。而且，正如@rgvcorley建议的那样，您应该专注于在开发环境中使代码可读和可维护，并将文件大小的较小细节留给构建过程和Web服务器。

Answer 3

有一点不排除另一件事：你可以同时做最小化和gzipping JS文件（通常在网络服务器级别进行gzip）。我认为它会提供最好的结果。最小化和压缩对较大的文件更有效。

除了使JS更小，我还会看：

将JS文件合并到一个缩小文件中以减少HTTP请求数
优化HTTP缓存设置
将JS放入CDN以减少下载时间
将公共CDN用于一些常见的JS库，例如jQuery，因此更有可能从用户的本地缓存中获取
添加JS文件和HTML页面的结尾

使用http://www.webpagetest.org/检查您的网站，了解可以改进的其他内容

有关详细信息，我建议您阅读High Performance Web Sites本书。它涵盖了一些场景，即使是一些简单的更改也可以显着改善页面加载时间

javascript优化和缩小与gzipping

3 个答案: