JavaScript压缩和对象属性问题

Question

主要的JavaScript压缩器和缩小器不处理对象属性名称。(Google Closure，YUI...)。

我注意到，根据我们选择的方式或模式，我们的脚本在生成的大小（gzipped和未gzipped）方面存在很大差异。

例如，为我们的项目选择原型模式很可能会生成更大的结果文件（未压缩、压缩和gzipped）。

以下是两个完全相同的代码片段的简短比较：

- 原型模式 138字节 gzipped (286字节未压缩) - 无模式 87字节 gzipped (110字节未压缩)

使用Google Closure编译器进行压缩。

仅通过查看生成的压缩代码就可以看出结果非常明显： 原型模式

---

var MyBluePrint=function(){this.name="demo";this.someFunction=function(){alert("some function")};this.someOtherFunction=function(){alert("some other function")};this.showMyName=function(){alert(this.name)};this.someFunction();this.someOtherFunction();this.showMyName()};new MyBluePrint;

没有模式

---

var MyBluePrint=function(){alert("一些函数");alert("另一些函数");alert("演示")};new MyBluePrint;

任何使用对象属性的内容都不会被压缩，例如：

//function declarations
this.someFunction = function(){ ... }

//objects
var demo = {
    isActive: 'aaaa'.
    name: 'aaaa'
}

在创建项目时，我们是否应该真的考虑这个问题？有时候我会决定使用普通变量而不是充满属性的对象，只是为了压缩多次使用的长属性名。

- Alvaro

---

取决于潜在的节省量，因此也取决于您需要最小化的代码规模。最终的节省量会有多大？ - tucuxi

你的 JSFiddle 链接是相同的。两个都似乎是“without pattern”方法。 - Chad Killingsworth

@ChadKillingsworth 抱歉，已更新链接。 - Alvaro

Answer 1

Closure-Compiler可以使用ADVANCED_OPTIMIZATIONS对属性名称进行完全重命名。此外，要充分发挥Closure-compiler的功能，您需要使用@constructor注释告诉编译器MyBluePrint是一个构造函数。而且，您所称之为“原型模式”的实际上是使用实例方法而不是原型。

以下是更新后的比较：

• 实例方法 - 经过gzip压缩后104字节
• 私有闭包 - 经过gzip压缩后79字节
• 原型方法 - 经过gzip压缩后81字节

Closure compiler可以在许多情况下完全内联方法，使输出大小差异几乎可以忽略不计。如果您可以使用ADVANCED_OPTIMIZATIONS的Closure-compiler，则应选择提供最佳可维护性的代码模式，并让编译器处理优化。

但是，所有这些比较基本上都没有意义。要进行实际的GZIP压缩比较，您需要一个大型代码库。小片段的代码不能提供准确的表示。

- Chad Killingsworth