Google Closure中的变量 [英] Variables in 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忽略了它.
它也忽略了大多数其他类似这样的尺寸优化技巧.
可以解决吗?
这个问题是关于Google Closure，而不是JavaScript模式.
编译器假定将文件提供给用户后会被压缩，因此会针对压缩的文件大小进行优化，而不是针对文件大小进行优化未压缩的大小.
我用两种版本的代码进行了测试.
版本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将重复部分压缩到大致相同的空间，而不管重复文本有多长. /p>
这是常见问题解答:
Closure Compiler内联了我所有的字符串，这使我的代码更大.为什么这样做呢?
大多数人通过查看两个未压缩的JavaScript文件来比较代码大小.但这是查看代码大小的一种令人误解的方式，因为您的JavaScript文件不应该以未压缩的形式提供.应该与gzip压缩一起使用.
Closure Compiler假定您正在使用gzip压缩.如果不这样做，则应该这样做.将服务器配置为gzip代码是您可以做的最有效，最简单的优化之一. gzip算法通过尝试以最佳方式对字节序列进行别名来工作.手动别名字符串几乎总是使压缩后的代码大小更大，因为它会破坏gzip自己的别名算法. 因此Closure Compiler将(几乎)始终尽可能内联您的字符串，因为这会使您的压缩代码更小.
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);
});
})();
Code like this is minified to:
(function(){this.each(function(){alert({method1:"somevar1",method2:"somevar2",method3:"somevar3",method4:"somevar4",method5:"somevar5"})})})();
Which is definitely bigger at length (+11 symbols) than:
(function(){var a="somevar";this.each(function(){alert({method1:a+"1",method2:a+"2",method3:a+"3",method4:a+"4",method5:a+"5"})})})();
The problem is, we had two variables, but got one instead.
Actually it's not bad for a small scripts, but can hurt on a big ones.
First variable is added to make minified code a bit smaller, but google ignores it.
It also ignores most of the other size optimization tricks like this.
Can it be fixed?
This question is about Google Closure, not JavaScript patterns.
The compiler assumes that the file will be gzipped when it's served to the user, so it optimizes for the compressed file size instead of the uncompressed size.
I tested with two versions of the code.
Version A (treating a as a global variable prevents it from being automatically concatenated later):
(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);
});
})();
Resulting minified code:
(function(){a="somevar";this.a(function(){alert({b:a+"1",c:a+"2",d:a+"3",e:a+"4",f:a+"5"})})})();
Size: 97 bytes (95 bytes gzipped).
Version B (the same as above, but a is a local variable so the compiler does its optimizations):
(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);
});
})();
Resulting minified code:
(function(){this.a(function(){alert({b:"somevar1",c:"somevar2",d:"somevar3",e:"somevar4",f:"somevar5"})})})();
Size: 110 bytes (89 bytes gzipped).
So the second version is larger uncompressed, but when it's gzipped it's smaller because the variable declaration is gone and gzip compresses repetitive parts to roughly the same space regardless of how long the repeated text is.
Here's an entry from the 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.
这篇关于Google Closure中的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
