Question

我在jquery和使用它构建的大型应用程序上投入了大量时间。最近我一直在评论Google Closure Library，但此时发现它并不像jquery那样优雅。我相信它可能有一些潜力，并会更多地研究它，但是现在我打算继续使用jQuery作为我的基础框架。

然而，Google Closure Compiler给我留下了非常深刻的印象。我希望在我的应用程序的构建过程中开始使用它。遗憾的是，将其用于不符合标准Google Closure标准的项目并不十分清楚。

在开发基于jquery的项目和使用Google Closure Compiler方面是否有任何最佳实践或良好资源？例如：

使用它编译jquery和jquery-ui是否有意义，还是应该继续在google CDN上指向这些资源？我确定我的jquery和jquery-ui会更小，因为我不使用库的所有功能，但是指向CDN会增加文件已经存在于访问者缓存中的机会。
我的应用程序被拆分为许多文件，每个函数都有一个文件。我想按照特定的顺序将它们组合在一起，并将它们缩小为我网站上每个部分的文件。我想自动化这个过程。
目前我的项目有一个java后端，并使用Maven构建。将Google Closure Compiler添加到此构建过程中是否有意义？

基本上，我正在寻找任何特定于使用Google Closure Compiler和jQuery的优秀资源。

Answer 1

Google Closure Compiler是jQuery或任何其他库不可知的。它有两种类型的优化 -

简单
高级

我尝试应用高级优化，但严重破坏了我的应用程序。如果它是相同的，您可以尝试修复您的应用程序，或使用简单的优化。通过简单的优化，大小减少了32％，使用高级优化大约减少了68％，但这无论如何都没有用。

以自动方式将JS连接移动到构建过程中绝对是可行的方法。请参阅JavaScript dependency management。

jQuery已经针对字节大小进行了大量优化，所以我怀疑你是否能够通过使用Google Closure Compiler来充分利用它，但是当你的项目结合时，它值得一试。

我认为谷歌封闭图书馆有利，但还没有使用它，因为我现在在MooTools上投入了大量资金。看看它是API，除了DOM操作，AJAX处理，事件处理等之外，它似乎对它提供的内容有相当广泛的报道。

Answer 2

$(elem)['width']()代替$(elem).width()

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

Answer 3

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

构建编译命令 - 我们需要一种在构建过程中以自动方式调用带有所有必要参数的编译器的方法。对我们来说，这意味着编写一个控制台应用程序来构造命令。如果您的环境中有shell脚本，那么这可能是一个优势。
管理依赖关系 - Closure编译器确实能够自动对组合JS的顺序进行排序，从而保留依赖关系。为了利用此功能，必须使用goog.provide\goog.require注释JS文件，以告诉编译器依赖项是什么（--manage_closure_dependencies）。编译器还将从组合的JS中排除任何不需要的JS（即，不通过goog.require语句引用）。以下是一些需要注意的事项：
- 如果要在组合输出中包含所有JS文件，请确保在编译中包含“清单”JS文件，该文件仅包含要包含在组合脚本中的每个文件的goog.require语句（即没有goog.provide陈述。
- 如果您未使用Closure Library，请确保使用SIMPLE_OPTIMIZATIONS或更高版本进行编译。否则，编译器将不会删除goog.provide/goog.require语句。或者，您也可以定义自己的goog.provide/goog.require JS函数以避免错误。
- 确保没有周期性依赖关系或面临后果。
编译组合脚本的调试版本 - 如果需要，可以使用--formatting PRETTY_PRINT标志编译组合脚本的调试版本。这将输出格式为空格的等效脚本，用于开发/调试。

尽管Closure编译器文档有时可能很稀疏，但它确实足以在大多数情况下开始并且不断改进 - 所以定期检查更新，而不仅仅是SO;）

希望这有帮助。

Answer 4

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

事实上，在流行的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

Using jQuery with closure compiler advanced mode

Answer 6

让jQuery与闭包编译器/高级版配合使用对我来说很困难，但是由于你处理多个文件，我认为你在这里查看模块选项很重要：

Using the --module option in Closure Compiler to create multiple output files

我一直在寻找网上的好文档，但非常非常很少。通过使用单个jQuery extern，我能够使用高级文件进行编译 - 包含多个文件等。

@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

Tauren，您可以使用closure-compiler主页测试您的代码。您可以导入您的JQuery库或其他东西并尝试它。如果可能，请使用匿名函数定义JavaScript代码，以避免命名冲突。使用Google库提供功能使用命名空间。另一个可以帮助你的好资源是Google JavaScript Style Guide

Answer 8

您可以使用kjscompiler：https://github.com/knyga/kjscompiler并将您喜欢的任何库指定为外部库。他们不会被缩小。非常好的解决方案。

带有jQuery应用程序的Google Closure Compiler

8 个答案: