使用闭包编译器删除 jQuery 中未使用的部分

发布于 2024-11-07 13:11:32 字数 487 浏览 0 评论 0原文

是否可以使用闭包编译器删除 jQuery 中未使用的部分?

我有一个仅使用 jQuery 的网络 (json) 函数的脚本,并且我想要一个删除其他所有内容的缩小脚本。

我尝试使用以下方式调用它:

    java -jar compiler.jar --compilation_level=ADVANCED_OPTIMIZATIONS --js=jquery-latest.js --js=my_script.js  --js_output_file=out.js

但最终我得到的文件不小于常规的缩小 jQuery 源文件。

编辑:我应该提到这背后的原因。该脚本将包含在第 3 方网站中,并且需要更高版本的 jQuery(1.5 或 1.6)。我认为处理这个问题的最简单方法是将最新版本捆绑到脚本中(仅适用于我的脚本,不接触 window.jQuery),删除未使用的部分以减小大小。这样,如果他们已经有旧版本的 jQuery,就不会造成干扰。

Is it possible to use the closure compiler to remove unused parts of jQuery?

I have a script which only uses jQuery's networking (json) functions, and I'd like a minified script which removes everything else.

I've tried invoking it with:

    java -jar compiler.jar --compilation_level=ADVANCED_OPTIMIZATIONS --js=jquery-latest.js --js=my_script.js  --js_output_file=out.js

But I end up with a file no smaller than the regular minified jQuery source.

Edit: I should mention the reason behind this. This script is going to be included in 3rd party websites, and it requires a later version of jQuery (1.5 or 1.6). I thought the easiest way to handle this was to bundle the latest version inside the script (only available to my script, not touching window.jQuery), removing unused parts to reduce size. That way if they already had an older version of jQuery, it wouldn't interfere.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

蒲公英的约定 2024-11-14 13:11:32

在 jQuery 中删除“未使用”的方法是不可能的,因为您可以用疯狂的方式调用方法,例如:

<input id="test" value="hello!"/>

alert($('#test')[prompt('Method?')]()); // input "val" in the prompt box

闭包编译器不可能知道将使用或不使用哪些方法。

小提琴: http://jsfiddle.net/garreh/xDDXt/


作为一些旁注:

  • jQuery 的最新生产版本(1.6)只有 31kb。通过适当的缓存控制,该文件将被下载一次并由浏览器本地缓存。
  • 您可能会帮自己一个忙,优化通常尺寸更大的东西,即图像。
  • ...或减少浏览器请求,例如使用 CSS sprite 技术来更好地优化您的网站。
  • 将 jQuery 代码

It's not possible to remove "unused" methods in jQuery because you can call methods in insane ways like:

<input id="test" value="hello!"/>

alert($('#test')[prompt('Method?')]()); // input "val" in the prompt box

The closure compiler can't possibly know what methods will be used or not.

Fiddle: http://jsfiddle.net/garreh/xDDXt/


As some side notes:

  • The latest production version of jQuery (1.6) is only 31kb. With proper caching control, this will be downloaded once and cached locally by the browser.
  • You'll probably be doing yourself a favour to optimize things that are generally much bigger in size i.e. images.
  • ... or reducing browser requests, such as using the CSS sprite technique to better optimize your website.
  • Place your jQuery code <script> tag at the bottom of the page, to achieve greater download parallelization. http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/
A君 2024-11-14 13:11:32

首先,要删除死代码,您需要高级模式。我看到你已经在使用它了。

其次,您编写的代码必须符合使用高级模式的严格限制。我想您已经做到了这一点并彻底检查了您的代码——否则编译后的代码将无法工作。

然后您需要引用 jQuery“externs”文件——您可以从 Closure Compiler 的网站获取该文件。如果没有这个 externs 文件,Closure 将重命名 jQuery 中不应该重命名的属性和函数。

最后,jQuery 并不是为与闭包编译器的高级模式一起使用而编写的。它在很多地方创建了无法优化的“别名”。即使代码库中的任何位置有一个别名,整个 jQuery 对象及其下面的所有内容都会被拉入。

简短回答:如果不做大量工作,就不可能将闭包编译器的高级模式与 jQuery 一起使用来删除死代码。

题外话:Dojo Toolkit 是迄今为止唯一可以在高级模式下与 Closure 编译器一起使用的流行 JavaScript 库(除了 Closure 库)。支持闭包编译器的所有高级功能(例如死代码删除、方法虚拟化、名称空间扁平化等)。

检查此链接以获取 TODO 文档:http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

First of all, for dead code removal you need the Advanced Mode. I see that you are already using it.

Then second, your code must be written to conform to the severe restrictions of using Advanced Mode. I suppose that you've done that and checked your code thoroughly -- otherwise the compiled code won't work.

Then you'll need to reference the jQuery "externs" file -- you can get that from the Closure Compiler's web site. Without this externs file, Closure will rename properties and functions in jQuery that it shouldn't.

Lastly, jQuery is not written to work with the Closure Compiler's Advanced Mode. There are many places that it creates "aliases" which cannot be optimized away. With even one alias anywhere within the code base, the entire jQuery object will be pulled in and everything underneath.

Short Answer: It is not possible without a lot of work to use the Closure Compiler's Advanced Mode with jQuery for dead code removal.

Off-Topic: The Dojo Toolkit is so-far the only popular JavaScript library (other than the Closure Library) that can be used with the Closure Compiler in Advanced Mode. All of the Closure Compiler's advanced features (e.g. dead code removal, virtualization of methods, namespace flattening etc.) are supported.

Check this link for a TODO document: http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

懵少女 2024-11-14 13:11:32

有很多原因导致编译器不会对 jQuery 库执行任何操作,首先是 jQuery“导出”本身:

window.jQuery = jQuery

在高级模式下,此习惯用法用于告诉编译器外部使用了一个值脚本,因此对象本身永远不会被删除,名称层次结构不会折叠,等等。

如果删除它,jQuery 会将自身嵌入到匿名函数函数包装器中,这会阻止许多 ADVANCED 模式的全局范围优化(名称层次结构、用于类型分析的类检测等)。

但是,当您删除此问题时,没有太大变化,但我没有寻找下一个问题。

There are a lot of reason the compiler won't do anything with the jQuery library, starting with the jQuery "exporting" itself:

window.jQuery = jQuery

In advanced mode, this idiom is used to tell the compiler a value is used externally to the script, so the object itself will never be removed, the name hierarchies are left uncollapsed, etc.

If you remove this, jQuery embed itself in an anonymous function function wrapper, which prevents many of the ADVANCED mode's global scope optimization (name hierarchies, class detection for type analysis, etc).

Not much changes when you remove this however but I didn't look for the next issue.

小清晰的声音 2024-11-14 13:11:32

尝试使用 ender 代替。

它的理念是一组微框架的组合。不需要某个功能,那么就不要将其构建到 ender 中。

如果您只需要 ajax,请将 ajax 模块添加到您的 ender 构建中。

Try ender instead.

It's philosophy is a combined set of micro frameworks. Don't need a feature, then don't build it into ender.

If you just need ajax add the ajax module to your ender build.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文