Question

我想最小化我必须通过电子线发送给我个人网站的Javascript代码的大小。编写能够更好地压缩的代码是否有任何技巧？我正在思考min-ification 和 gzip。

我需要使用短变量名吗？或者，min -ification可以找到所有这些实例并缩短它们吗？或者它是否正常，因为gzip将检测它们并压缩电线？对于函数，传递具有属性的对象是否更好？或者只需要为每个值提供单独的参数？（我可以想象，参数可以安全缩短，因为它们总是在函数本地）

我对这些工具的功能有一个粗略的了解，但是对于如何编写我的Javascript以尽可能小地压缩它还不够。

Answer 1

您应该同时使用缩小和gzipping，有关结果，请参阅https://css-tricks.com/the-difference-between-minification-and-gzipping/。您还应该考虑使用客户端缓存，因为这将在缓存命中时完全消除线路上的成本。另外，请确保您没有在回复中发送任何冗余的http标头。

Answer 2

如果您使用的是缩小工具，则不需要为变量使用短名称，缩小器将负责处理。

对于函数参数，从缩小的角度来看，最好使用单个参数而不是对象属性，因为minifier不能重命名对象属性，但会重命名参数。

我没有资格就如何从Gzip角度编写更多可压缩代码向您提供建议，但我可以就编写更多可修改的Javascript代码给您一些建议。

我的第一个建议是你在你的代码上运行你最喜欢的minifier，然后将它的漂亮印刷版本与原始代码进行比较。这样您就可以了解缩放器对代码所做的更改。

通常，minifiers将函数名称重命名为较短的函数名称，但不能重命名对象属性。

所以请避免这样：

foo.bar.baz.A = 1;
foo.bar.baz.B = 2;
foo.bar.baz.C = 3;

相反，请执行此操作：

var shortcut = foo.bar.baz;
shortcut.d = 1;
shortcut.e = 2;
shortcut.f = 3;

缩小器会将shortcut重命名为一个或两个字母变量。

另一个好习惯是尽可能多地使用method chaining（特别是如果你使用的是JQuery）

例如，请避免这样：

$div.css('background', 'blue');  // set BG
$div.height(100);                // set height
$div.fadeIn(200);                // show element

而这样做：

$('#my-div')
  .css('background', 'blue')
  .height(100)
  .fadeIn(200);

如何编写压缩友好的JavaScript？

2 个答案: