11

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.

3
  • did you minify the the closure-compiled jQuery? Or did your minifier have dead code removal already?
    – Lie Ryan
    May 13, 2011 at 14:06
  • I minified the un-minified jQuery. I did a trial where I didn't add any code at all and minified jQuery with advanced optimizations on, expecting to get an empty file since no methods are called (as in the advanced optimizations faq)
    – John Smith
    May 13, 2011 at 14:32
  • You can get the code from the github. Just fork it, delete the stuff you don't want and re-build.
    – Hogan
    May 13, 2011 at 17:50

4 Answers 4

6

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/
3
  • Not to mention that if it's an externally-facing website, you should be referencing the jQuery CDNs (Google or MS) and so there's a fairly good chance the user won't download it at all, and if they do, it'll be super fast and downloaded in parallel to your site's content. May 13, 2011 at 14:22
  • Thanks for the side notes. @Adam: I've added an edit to explain the reason for doing this: including the script in 3rd party websites, relying on a later version of jQuery, but not interfering with an existing (possibly lower) version of jQuery already on the 3rd party website
    – John Smith
    May 13, 2011 at 14:30
  • The problem is that on many websites the 80% of the users are non returning so the cache cannot help..
    – Revious
    Jan 8, 2019 at 23:25
5

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
  • 1
    Would you possibly add any explanation or example, or a link to a reference, to explain your statement, it creates "aliases" which cannot be optimized away: what is an "alias", which cannot be optimized away?
    – ChrisW
    Oct 28, 2016 at 22:22
  • The Closure Compiler has gone through tremendous changes since this answer. What was not possible 2-3 years ago might not be now. I'd suggest you look at the latest docs on the compiler to find out. Nov 2, 2016 at 3:07
  • Basically, an alias is an alternative way of reaching the same property of an object. The simplest way to create an alias is var foo = { bar: 123 }; var baz = foo; In this example, baz is an alias to foo. That means foo.bar has an alternative route to access it (i.e. baz.bar). In that case, it is impossible to "flatten" the namespace (i.e. renaming foo.bar into x) because then baz.bar will be left hanging. Thus aliases would always prevent certain optimizations. However, as I said, check with the latest compiler to see if they've relaxed this rule. Nov 2, 2016 at 3:09
1

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.

1
  • I had tried removing that line, "window.jQuery = window.$ = jQuery;" and had the same result as you: nothing changes. I suspect it's because of the issue Gary brought up, that you can invoke jQuery's functions in so many ways that it can't tell what's being used and what isn't.
    – John Smith
    May 13, 2011 at 17:42
-1

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.