如何编写压缩友好的 JavaScript ？

Question

我想尽量减少必须通过网络发送的用于我的个人网站的 Javascript 代码的大小。是否有任何技巧可以编写压缩效果更好的代码？我正在考虑最小化和 gzip.

我需要使用短变量名吗？或者最小化可以找到所有这些实例并缩短它们吗？或者它很好，因为 gzip 会检测到它们并通过网络进行压缩？对于函数，传入一个有属性的对象是不是更好？或者只是为每个需要的值设置单独的参数？（我可以想象参数对于最小化缩短是安全的，因为它们始终是函数的局部参数）

我对这些工具的作用有一个粗略的了解，但是对于我应该如何编写我的 Javascript 以尽可能小地进行压缩还不够自信。

Answer 1

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

Answer 2

如果您使用缩小工具，则不需要为变量使用短名称，缩小器会处理这个问题。

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

我觉得我没有资格从 Gzip 的角度建议你如何编写更可压缩的代码，但我可以给你一些关于编写更可压缩的 Javascript 代码的建议。

我的第一个建议是运行你最喜欢的代码压缩器，然后将它的漂亮打印版本与原始代码进行比较。这样您将了解您的压缩器对您的代码进行了哪些更改。

通常，缩小器将变量和函数名称重命名为更短的名称，但不能重命名对象属性。

所以要避免这种情况：

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 ？

How do I write JavaScript which is compression-friendly?

javascript

gzip

minify