javascript - Google Closure 中的变量

标签 javascript jquery minify google-closure

http://closure-compiler.appspot.com/home

(function(){

var somevar = 'somevar';

this.each(function(){
var minify_var = {
  method1: somevar + '1', 
  method2: somevar + '2',
  method3: somevar + '3',
  method4: somevar + '4',
  method5: somevar + '5'
};

alert(minify_var);
});

})();

像这样的代码被缩小为:

(function(){this.each(function(){alert({method1:"somevar1",method2:"somevar2",method3:"somevar3",method4:"somevar4",method5:"somevar5"})})})();

它的长度(+11 个符号)绝对大于:

(function(){var a="somevar";this.each(function(){alert({method1:a+"1",method2:a+"2",method3:a+"3",method4:a+"4",method5:a+"5"})})})();

问题是,我们有两个变量,但取而代之的是一个。

实际上这对小脚本来说还不错,但对大脚本来说可能会造成伤害。

添加第一个变量是为了让缩小后的代码更小一些,但谷歌忽略了它。

它也忽略了像这样的大多数其他尺寸优化技巧。

能修好吗?

这个问题是关于 Google Closure,而不是 JavaScript 模式。

最佳答案

编译器假定文件在提供给用户时将被 gzip 压缩,因此它针对压缩 文件大小而不是未压缩文件大小进行优化。

我测试了两个版本的代码。

版本 A(将 a 视为全局变量可防止其稍后自动连接):

(function () {
    a = 'somevar';

    this.each(function () {
        var minify_var = {
            method1: a + '1',
            method2: a + '2',
            method3: a + '3',
            method4: a + '4',
            method5: a + '5'
        };

        alert(minify_var);
    });
})();

生成的缩小代码:

(function(){a="somevar";this.a(function(){alert({b:a+"1",c:a+"2",d:a+"3",e:a+"4",f:a+"5"})})})();

大小:97 字节(95 字节压缩)。

版本 B(与上面相同,但 a 是局部变量,因此编译器会进行优化):

(function () {
    var a = 'somevar';

    this.each(function () {
        var minify_var = {
            method1: a + '1',
            method2: a + '2',
            method3: a + '3',
            method4: a + '4',
            method5: a + '5'
        };

        alert(minify_var);
    });
})(); 

生成的缩小代码:

(function(){this.a(function(){alert({b:"somevar1",c:"somevar2",d:"somevar3",e:"somevar4",f:"somevar5"})})})();

大小:110 字节(89 字节压缩)。


所以第二个版本未压缩时更大,但压缩后变小了,因为变量声明消失了,gzip 将重复部分压缩到大致相同的空间,而不管重复文本有多长。

这是来自 FAQ 的条目:

Closure Compiler inlined all my strings, which made my code size bigger. Why did it do that?

Most people compare code size by looking at two uncompressed JavaScript files. But that's a misleading way to look at code size, because your JavaScript files should not be served uncompressed. It should be served with gzip compression.

Closure Compiler assumes that you are using gzip compression. If you do not, you should. Configuring your server to gzip your code is one of the most effective and easiest optimizations that you can possibly do. The gzip algorithm works by trying to alias sequences of bytes in an optimal way. Aliasing strings manually almost always makes the compressed code size bigger, because it subverts gzip's own algorithm for aliasing. So Closure Compiler will (almost) always inline your strings when it can, because that will make your compressed code smaller.

关于javascript - Google Closure 中的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15848174/

相关文章:

javascript - Gulp 缩小后的 js 抛出错误

javascript - 有没有一个函数可以让你在javascript中监听控制台日志?

javascript - XMLHttpRequest GET 在 React.js 中不起作用

c# mvc4 Html.DropDownListFor调用 Controller

javascript - 淡出和淡入具有特定类和 id 的 Div

javascript - jQuery 在 iMacro 中不工作

javascript - React Native 查找文本是否溢出容器

javascript - 如何在 Foundation 4 Orbit 中捕获 slider 事件?

javascript - 什么是适用于 Ubuntu 的易于使用的 JavaScript 压缩器?

javascript - 在 JavaScript 中渲染期间缩小文件