使用 Google Closure Compiler 编译的 jQuery

Posted

技术标签:

【中文标题】使用 Google Closure Compiler 编译的 jQuery【英文标题】:jQuery compiled with Google Closure Compiler 【发布时间】:2010-12-14 02:14:59 【问题描述】:

有没有人针对 Google 新发布的 Closure 编译器编译 jQuery?

据报道,代码大小大大节省。我很好奇如果用它编译 jQuery 会有什么好处。

【问题讨论】:

我会等待 Resig 和团队发布新的 -min 或特殊的封闭版本。我不想压缩库,发现特定功能不起作用或没有按预期工作。 我的第一个(也是唯一一个)反对票。如果 OP 不接受答案(或至少说明所提供答案的不可接受之处),则问题不值得投票。成为一个好问题的部分原因在于了解可接受的解决方案。 【参考方案1】:

John Resig 在尝试编译每晚的 jQuery 1.4 时报告了递归函数的错误,因此需要解决一些问题。如果不确保它通过 jQuery 测试平台,我不会使用使用 Closure Compiler 编译的 jQuery。

http://code.google.com/p/closure-compiler/issues/detail?id=1&can=1#c2

【讨论】:

指出,现在 jQuery 1.4 已经发布,错误已经解决,Closure Compiler 现在是 jQuery 的主要压缩器 :) 只是一个简短的说明:原来调用闭包编译器是相当简单的。除其他外,它是一个优化编译器,删除死代码并通过静态分析提供有用的编译时警告。【参考方案2】:

我尝试使用 jQuery jQuery 1.3.2

jQuery-1.3.2.min.js     57254 Bytes
jQuery closure compiler 49730 Bytes
-----------------------------------
Reduced by               7524 Bytes
Saved 13.31% off the original size
Saved 10.87% off the gzipped size

大约 7KB 的增益

但它也报告了 15 个警告,我没有测试它是否仍然有效

【讨论】:

【参考方案3】:

闭包编译器会消除您实际上不使用的任何代码。典型的网页只会使用一小部分的 jQuery 函数,所以最大的好处是把你的代码和完整版的 jQuery 一起编译。

【讨论】:

但是,当然,您将失去缓存在用户计算机上的 jQuery 代码的任何好处(如果有的话)。 实际上,上次我检查 Closure 并没有真正从 jQuery 中删除未使用的函数,我认为是因为它们实际上并没有被定义为单独的函数。 如果是这样,当你只编译 jQuery 库时,Closure Compiler 不会删除几乎所有代码吗? 这个意图是的,但是高级闭包编译器现在还远非完美。【参考方案4】:

关闭 ADVANCED_OPTIMIZATIONS:

jquery-1.3.2.min.js:57254 字节 jquery-1.3.2.closure.js 55346 字节 (-3.4%) jquery-1.3.2.min.js.gz:19680 字节 jquery-1.3.2.closure.js.gz:18666 字节 (-5.2%)

启用 ADVANCED_OPTIMIZATIONS 后:未经修改无法正常工作。打开 ADVANCED_OPTIMIZATIONS 并且我可以找到导出的所有内容...它仍然无法正常工作,并且代码已经再次达到 53466 字节(并且压缩了 18785 个字节,这比gzip 没有 ADVANCED_OPTIMIZATIONS 的封闭代码),所以它看起来不像是一个成功的提议。

【讨论】:

ADVANCED_OPTIMIZATIONS 标志不是针对文件大小进行优化,而是针对执行速度进行优化(它会尝试更改您的代码以使其运行更快,而不是下载更快)。 @Kekoa,从我读过的online 和print 看来,文件大小(和下载速度)似乎是 ADVANCED_OPTIMIZATIONS 和一般编译器的主要目标。跨度> 较小的文件大小通常(但不总是)导致更快的代码。死代码删除和内联有两个目的。 如果有很多调用,内联并不总能减小文件大小。【参考方案5】:

从 jQuery 1.4 开始,Google 的 Closure Compiler 被用作 jQuery 版本的默认缩小技术。但是,jQuery 只使用 SIMPLE_OPTIMIZATIONS 设置。 jQuery 团队有no plans to support ADVANCED_OPTIMIZATIONS。

【讨论】:

过时的:“但是,我们相信我们可以做得更好,并希望为任何用户提供自动化的方法来创建一个包含应用程序代码和所需部分的最佳最小化文件jQuery。特别是,我们正在与 Google Closure Compiler 团队合作,看看我们是否可以使用它的 ADVANCED_OPTIMIZATIONS 选项。随着它的开发,我们将获得更多关于我们进展的信息。 blog.jquery.com/2011/11/22/call-for-jquery-1-8-ideas【参考方案6】:

出于好奇,我对最新的 Prototype 和 jQuery 库进行了 SlickSpeed 测试,使用 YUI 和 Closure 进行了缩小。 You can run the tests here.

正如其他人所指出的,使用 ADVANCED_OPT 编译不起作用,但如果有人想做这项工作,我很乐意将结果添加到 SlickSpeed 测试中。

【讨论】:

【参考方案7】:

关闭不只是最小化和重命名变量吗? jQuery 已经有一个 .min 版本。再次使用关闭进行缩小可能会带来最小的帮助和潜在的危险。

编辑:我刚刚做到了。

Compilation was a success!

Original Size:  55.91KB (19.28KB gzipped)
Compiled Size:  54.05KB (18.28KB gzipped)
Saved 3.34% off the original size (5.18% off the gzipped size)

这是在已经挖掘的版本之上。这里有一个演示:http://closure-compiler.appspot.com/home

【讨论】:

是的,JQuery 已经使用了缩小器。我刚刚阅读了一篇关于如何使用 Closure 而不是 YUI Compressor 重新编译 Prototype 的文章。 Prototype 的 Closure 版本比 YUI Compressor 生产的要小 60%。这太小了,可以为加速 Web 应用程序而创建。 理论上,您可以将 javascript 与 jQuery 混合使用,并让 Closure 重命名所有 .click.each 等以节省更多费用。 @Tinister,你会怎么做。不会关闭然后需要解析您的 html 页面以查看调用的内容和不调用的内容 你的 HTML 页面中没有放任何 JS。 闭包编译器不只是最小化和重命名。如果你编译一个大型 JS 程序,你会发现它是一个重新编译。它会将代码内联放在有意义的地方。它将重新组织复杂的条件等。【参考方案8】:

我试过他们的online compiler,效果很好。

【讨论】:

【参考方案9】:

我使用 Closure(带有 ADVANCED_OPTIMIZATIONS)来压缩我托管的单页网站的 javascript 代码,并发现与 YUI Compressor 相比显着节省了大小。所以我也开始研究为那个网站缩小 jQuery,因为它肯定不使用整个 jQuery 库。

每次我通过编译器运行 jQuery 时都会收到警告,主要是指出未使用的代码部分。即使这样,编译后的代码也不起作用。我看到的主要问题是编译器没有正确导出内容。我可以通过将函数附加到窗口对象来轻松地从我自己的代码中导出函数,但是我还不能用 jQuery 做到这一点。

好消息是 John Resig 已经在尝试使用 Closure。我怀疑我们会在不久的将来看到两者兼容的新版本。

【讨论】:

【参考方案10】:

jQuery 与高级模式下的闭包编译器不兼容(目前)。我同意让它兼容是一件非常好的事情,因为它的方法链语法非常容易用于原型虚拟化,从而大大提高了执行速度。

事实上,在流行的 JavaScript 库中(即除了 Closure 库之外),只有 Dojo Toolkit 兼容 Closure Advanced 模式。

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

【讨论】:

以上是关于使用 Google Closure Compiler 编译的 jQuery的主要内容,如果未能解决你的问题,请参考以下文章

为啥 Google 的 Closure 库不在他们的 CDN 上托管?

让 browserify 与 Google Closure Compiler 一起工作

使用 Google Closure Compiler 时如何防止关键字被混淆?

google closure 笔记-SOY template

如何有效地将 google-closure javascript 转换为现代 ES6?

在带有属性的ES6模块上使用Closure Compiler