38

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

但是，我对Google Closure Compiler印象非常深刻。我很想在我的应用程序的构建过程中开始使用它。不幸的是，尚不清楚将它用于不遵循标准 Google Closure 标准的项目有多容易。

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

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

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

  3. 目前我的项目有一个 java 后端，并且是用 Maven 构建的。将 Google Closure Compiler 添加到此构建过程是否有意义？

基本上，我正在寻找专门用于将 Google Closure Compiler 与 jQuery 结合使用的任何好的资源。

4

8 回答 8

10

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

  • 简单的
  • 先进的

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

以自动方式将 JS 连接移动到您的构建过程中绝对是要走的路。请参阅JavaScript 依赖项管理。

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

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

于 2010-07-10T07:40:11.983 回答
10

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

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

于 2011-05-13T20:21:49.847 回答
9

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

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

  2. 管理依赖关系——Closure 编译器确实有能力自动排序组合 JS 的顺序，从而保留依赖关系。为了利用此功能，必须对 JS 文件进行注释goog.provide\goog.require以告诉编译器依赖项是什么（--manage_closure_dependencies）。编译器还将从组合的 JS 中排除任何不需要（即未通过goog.require语句引用）的 JS。这里有几点需要注意：

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

  3. 编译组合脚本的调试版本- 如果需要，您可以使用--formatting PRETTY_PRINT标志编译组合脚本的调试版本。这将输出格式为空白的等效脚本，用于开发/调试。

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

希望这可以帮助。

于 2010-08-02T22:55:51.183 回答
6

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

于 2012-05-20T12:43:30.073 回答
5

jQuery 与高级模式下的 Closure Compiler 不兼容（目前）。我同意让它兼容是一件非常好的事情，因为它的方法链语法非常容易用于原型虚拟化，从而大大提高了执行速度。

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

于 2011-03-09T03:40:02.603 回答
4

让 jQuery 与闭包编译器/高级程序一起工作对我来说很困难，但是由于您要处理多个文件，我认为在这里查看模块选项很重要：

在 Closure Compiler 中使用 --module 选项创建多个输出文件

我一直在网上寻找好的文档，但很少。通过使用单个 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?
于 2013-02-14T05:11:20.173 回答
1

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

于 2010-11-06T19:55:55.860 回答
-1

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

于 2014-03-20T00:02:02.853 回答