带有 jQuery 应用程序的 Google Closure 编译器答案

【问题标题】：Google Closure Compiler with jQuery applications带有 jQuery 应用程序的 Google Closure 编译器
【发布时间】：2011-03-14 04:40:36
【问题描述】：

我在 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 结合使用的任何好的资源。

【问题讨论】：

看看code.google.com/intl/pt-BR/closure/compiler/docs/…

标签： jquery google-closure google-closure-compiler

【解决方案1】：

Google Closure Compiler 与 jQuery 或任何其他库无关。它有两种类型的优化 -

简单
高级

我尝试应用高级优化，但它严重破坏了我的应用程序。如果同样如此，您可以尝试修复您的应用程序，或使用简单的优化。使用简单优化后尺寸下降了 32%，使用高级优化后尺寸下降了大约 68%，但无论如何都没有奏效。

以自动方式将 JS 连接移动到您的构建过程中绝对是要走的路。见JavaScript dependency management。

jQuery 已经针对字节大小进行了高度优化，所以我怀疑您是否能够通过使用 Google Closure Compiler 来榨取足够的汁液，但与您的项目结合使用时值得一试。

我对 Google Closure Library 有很好的看法，但还没有开始使用它，因为此时我在 MooTools 上投入了大量资金。看看它的API，除了 DOM 操作、AJAX 处理、事件处理等之外，它似乎涵盖了相当广泛的内容。

【讨论】：

谢谢！当然，Google Closure Library 也有一些吸引我的地方，但是在使用 jQuery 之后，api 似乎过于冗长。但是，有一些功能确实让我感兴趣，这就是为什么我试图确定是否有一种方法可以有效地使用 GCC 和 GCL 以及 jquery。
当然可以将 jQuery 与 GCL 一起使用，因为两者都是很好的命名空间库，分别位于 jQuery/$ 和 goog 中，并且它们都没有修改一些人认为是奖励的基本原型。在某些领域，如 DOM、事件、AJAX 等，您可能会有多余的功能，您可以使用 jQuery 来处理这些，而使用 GCL 来处理其他的。也许写一个小的桥接层来包装/解包 DOM 节点，因为 jQuery 需要被包装的对象，而 GCL 需要本地 DOM 节点。
至少对我来说，我只使用 GCL 作为它的编辑器。这是迄今为止我见过的最好的开源编辑器。具有广泛的文档。您还可以轻松创建自己的自定义插件。对于剩下的简单 DOM 修改/AJAX 功能，我使用 JQuery。
“jQuery 已经针对字节大小进行了高度优化，所以我怀疑你是否能够通过使用 Google Closure Compiler 来榨取足够的汁液”：未来可能会改变。 JQuery 团队正在研究 Closure Compiler 的高级优化（特别是它删除死代码）以自动删除您的应用程序实际上不使用的任何功能。如果能成功那就太棒了！ blog.jquery.com/2011/11/22/call-for-jquery-1-8-ideas
Google Closure Compiler 与打开了高级优化的库无关。如果您没有正确安排事情以便它可以正确识别死代码（特殊的 cmets，声明或包含的所有依赖项），您会很难过。另一方面，如果您确实将这些布局正确，您将获得迄今为止您可以从任何缩小器中获得的最小缩小输出。

【解决方案2】：

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

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

虽然 Closure 编译器文档有时可能很少，但它确实足以让大部分人开始使用并且不断改进 - 所以要定期检查更新，而不仅仅是 SO ;)

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

你可以只包装你的脚本... (function($){...}(window['jQuery']))
@Tracker1 这无济于事：编译器会正确调用$，但会“优化”方法，因此$(elem).width() 会变成$(elem).a() 之类的东西。

【解决方案6】：

Using jQuery with closure compiler advanced mode

【讨论】：

写答案是使用extern 文件。

【解决方案7】：

让 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

这允许您将脚本包装在一个闭包中——因为默认情况下编译器会删除它们。如果你像我一样使用“use strict”，那就不行了。

--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?

【讨论】：

【解决方案8】：

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

【讨论】：