Use closure compiler to remove unused parts of jQuery

老子叫甜甜 提交于 2019-12-29 08:29:09

问题


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.


回答1:


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/



回答2:


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




回答3:


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.




回答4:


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.



来源:https://stackoverflow.com/questions/5993048/use-closure-compiler-to-remove-unused-parts-of-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!