带有jQuery应用程序的Google Closure Compiler

我有很多时间投资于jquery和一个用它构build的大型应用程序。 最近我一直在审查谷歌closures库 ，但在这个时候已经发现它不像jQuery那么优雅。 我相信它可能有一些潜力，并将更多地考虑它，但现在我打算继续使用jQuery作为我的基础框架。

不过，我对Google Closure编译器印象非常深刻。 我很想在应用程序的构build过程中开始使用它。 不幸的是，将其用于不符合标准Google Closure标准的项目将会是多么容易。

在开发基于jquery的项目和使用Google Closure编译器方面是否有最佳实践或优秀资源？ 例如：

1. 用它编译jquery和jquery-ui是否有意义，还是应该继续在google CDN上指向这些资源？ 我相信我的jquery和jquery-ui将会变得更小，因为我不使用库的所有function，但是指向CDN增加了文件已经在访问者caching中的机会。

2. 我的应用程序被分割成许多文件，每个function都有一个文件。 我想按照特定顺序合并它们，并将它们缩小到我网站上的每个部分的文件中。 我想自动化这个过程。

3. 目前我的项目有一个Java后端，并与Maven构build。 将Google Closure编译器添加到此构build过程是否有意义？

基本上，我正在寻找任何专门针对使用Google Closure Compiler和jQuery的优秀资源。

Answer 1

Google Closure编译器是jQuery或任何其他库不可知论者。 它有两种types的优化 –

• 简单
• 高级

我尝试应用高级优化，但严重破坏了我的应用程序。 如果它一样，你可以尝试修复你的应用程序，或使用简单的优化。 通过简单的优化缩小了32％，而高级优化则降低了大约68％，但是这并没有奏效。

将JS连接以自动化的方式移动到您的构build过程当然是最好的select。 请参阅JavaScript依赖关系pipe理 。

jQuery已经针对字节大小进行了大量的优化，所以我怀疑你可以通过使用Google Closure编译器来获得足够的果汁，但是当你的项目结合起来的时候值得一试。

我看好Google Closure Library，但没有得到使用，因为我现在在这个时候大量投资于MooTools。 看看它的API ，除了仅仅是DOM操作，AJAX处理，事件处理等之外，它看起来还有相当广泛的覆盖范围。

Answer 2

$(elem)['width']()而不是$(elem).width()

这适用于ADVANCED_OPTIMIZATIONS，所以闭包编译器不会重构jQuery方法。

Answer 3

我相信从1.4.2（也许更早）开始，默认情况下，使用Google Closure Compiler来缩小jQuery。 所以最好继续通过google CDN引用jQuery / jQuery UI。 但是，将Closure编译器集成到构build过程中以合并和缩小JS文件仍然有好处。 也就是说，每页加载的JS请求减less，传输的数据量减less，希望能够提高客户端的页面加载性能。 这些是我们在将Closure编译器集成到构build过程中遇到的一些挑战：

1. 构build编译命令 – 我们需要一种在构build过程中以自动方式调用编译器的所有必要参数的方法。 对我们来说，这意味着编写一个控制台应用程序来构build命令。 如果shell脚本在您的环境中可用，这可能是一个优势。

2. pipe理依赖关系 – Closure编译器具有自动sorting组合JS的顺序的能力，从而保持依赖关系。 为了利用这个特性，必须使用goog.provide\goog.require注释JS文件来告诉编译器什么是依赖关系（ –manage_closure_dependencies ）。 编译器还将从组合的JS中排除任何不需要的JS（即不通过goog.require语句引用）。 这里有一些需要注意的事情：

   • 如果你想包括你所有的JS文件在组合的输出，确保你在编译中包含一个“清单”JS文件，只包含goog.require语句为每个文件包括组合脚本（即没有goog.provide语句）。
   • 如果您不使用Closure库，请确保使用SIMPLE_OPTIMIZATIONS或更高版本进行编译。 否则，编译器不会删除goog.provide/goog.require语句。 另外，你也可以定义你自己的goog.provide/goog.require JS函数来避免错误。
   • 确保没有周期性依赖，否则将面临后果。

3. 编译组合脚本的debugging版本 – 如果需要，可以使用--formatting PRETTY_PRINT标志编译组合脚本的debugging版本。 这将输出格式化完整的用于开发/debugging的空格的等效脚本。

虽然Closure编译器的文档有时可能很稀疏，但它大部分已经足够用了，而且不断改进 – 所以定期检查更新，而不仅仅是SO;）

希望这可以帮助。

Answer 4

jQuery与高级模式下的Closure Compiler不兼容。 我同意将它兼容是一件非常好的事情，因为它的方法链接语法非常容易为原型虚拟化提高执行速度。

事实上，在stream行的JavaScript库（Closure Library除外）中，只有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

Answer 5

在闭包编译器高级模式下使用jQuery

Answer 6

让jQuery和闭包编译器/高级版一起工作对我来说一直很困难，但是由于你正在处理多个文件，所以我认为在这里查看模块选项是非常重要的：

使用Closure Compiler中的–module选项来创build多个输出文件

我一直在网上寻找好的文档，但是非常非常less。 通过使用一个单一的jQuery外部，我能够编译与先进罚款 – 与多个文件等

 @echo off java -jar bin\compiler.jar ^ --compilation_level=ADVANCED_OPTIMIZATIONS ^ --externs "externs\jquery-1.8.js" ^ --language_in=ECMASCRIPT5_STRICT ^ --warning_level=VERBOSE ^ --module_output_path_prefix .\compiled\ ^ ^ --module_wrapper core:"(function(){%%s%%})();" ^ --js ".\corelib.js" ^ --module core:1 ^ ^ --module_wrapper somescript"(function(){%%s%%})();" ^ --js ".\some_other_runtime_loaded_script" ^ --module somescript:1:core ^ ^ --module_wrapper somescript1:"(function(){%%s%%})();" ^ --js ".\some_other_runtime_loaded_script" ^ --module somescript1:1:core 

说明

 --module_wrapper name:wrapper 

这使您可以将脚本封装在闭包中 – 因为默认情况下，编译器将删除它们。 如果你像我一样使用“严格使用”，那是不行的。

 --module name:#:dependency name Name of the script that will get written # number of scripts above that line to include into this script dependency What script does this depend on? 

Answer 7

牛头人，你可以使用闭包编译器在家testing你的代码。 您可以导入您的JQuery库或其他东西，并尝试它。 如果可能的话，使用匿名函数来定义您的JavaScript代码，避免命名冲突。 使用Google库提供的function使用名称空间。 另一个可以帮助你的好资源是Google JavaScript Style Guide

Answer 8

您可以使用kjscompiler： https ： //github.com/knyga/kjscompiler并指定任何您喜欢的外部库。 他们不会被缩小。 真的很好的解决scheme。