jQuery compiled with Google Closure Compiler

Question

Has anyone compiled jQuery against Google's newly-released Closure compiler?

There has been reported huge savings in code size. I'm curious what the benefit is if jQuery was compiled with it.

Think I'll wait for Resig and the team to release a new -min or special closured version. I wouldn't want to compress the library find out specific features didn't work or didn't work as expected. — Tom, Nov 09 '09 at 08:28
My first (and only) down vote. Question does not deserve an up vote if the OP does not accept an answer (or at least state what's unacceptable about the answers offered). Part of what makes a good question is knowing the accepted solution. — Karl, Nov 21 '14 at 16:38

Nosredna · Answer 1 · 2009-11-07T23:09:22.670

27

John Resig reported a bug on recursive functions when he attempted to compile a nightly of jQuery 1.4, so there are a few kinks to be worked out. I wouldn't use a jQuery compiled with Closure Compiler without making sure it passes the jQuery testbed.

http://code.google.com/p/closure-compiler/issues/detail?id=1&can=1#c2

edited Nov 07 '09 at 23:09

answered Nov 07 '09 at 22:50

Nosredna

74,873
15
91
122

28

Pointing out that, now that jQuery 1.4 is released, the bugs are worked out and the Closure Compiler is now the primary minifier for jQuery :) – Matchu Jan 19 '10 at 05:13
1

Just a quick note: turns out that calling the Closure Compiler is rather simplistic. Among other things, it's an optimizing compiler, removes dead code and provides useful compile-time warnings through static analysis. – Luís Oliveira Aug 15 '11 at 18:04

score 12 · Answer 2 · answered Nov 07 '09 at 03:29

I tried with jQuery jQuery 1.3.2

jQuery-1.3.2.min.js     57254 Bytes
jQuery closure compiler 49730 Bytes
-----------------------------------
Reduced by               7524 Bytes
Saved 13.31% off the original size
Saved 10.87% off the gzipped size

Gain of ~7KB

But it also reports 15 Warnings and I didn't test if it still works

score 7 · Answer 3 · answered Dec 02 '09 at 22:53

7

The closure compiler eliminates any code that you don't actually use. The typical web page will only use a small fraction of jQuery functions, so the most benefit will come from compiling your code together with the full version of jQuery.

answered Dec 02 '09 at 22:53

Steve Hanov

10,263
15
56
63

6

But, of course, you lose any benefit from the jQuery code being cached on the user's computer (if it is). – Nosredna Jan 13 '10 at 15:15
1

Actually, last time I checked Closure didn't actually remove unused functions from jQuery, I think because they're not actually defined as separate functions. – DisgruntledGoat Apr 09 '10 at 12:51
If so, wouldn't Closure Compiler remove almost all code when you compile only the jQuery library? – Petr Peller Feb 11 '11 at 11:59
That's the intention yes, but the advanced closure compiler is far from perfect right now. – David Mulder Mar 30 '12 at 11:18

score 6 · Answer 4 · edited Jan 18 '11 at 01:49

6

With ADVANCED_OPTIMIZATIONS turned off:

jquery-1.3.2.min.js: 57254 bytes
jquery-1.3.2.closure.js 55346 bytes (-3.4%)
jquery-1.3.2.min.js.gz: 19680 bytes
jquery-1.3.2.closure.js.gz: 18666 bytes (-5.2%)

With ADVANCED_OPTIMIZATIONS turned on: it doesn't work unmodified. With ADVANCED_OPTIMIZATIONS turned on and everything I can find to export exported... it still doesn't quite work, and the code is already up to 53466 bytes again (and 18785 gzipped, which is more than the gzipped closured code without ADVANCED_OPTIMIZATIONS) so it doesn't look like a winning proposition.

edited Jan 18 '11 at 01:49

Robert Harvey

168,684
43
314
475

answered Nov 07 '09 at 04:21

hobbs

187,508
16
182
271

7

The ADVANCED_OPTIMIZATIONS flag does not optimize for file size but for execution speed(it tries to change your code to make it run faster, not download quicker). – Kekoa May 28 '10 at 17:30
1

@Kekoa, from what I've read [online](http://code.google.com/closure/compiler/docs/api-tutorial3.html) and in [print](http://books.google.com/books?id=p7uyWPcVGZsC&printsec=frontcover&source=gbs_ge_summary_r&cad=0#v=snippet&q=minification&f=false), it seems like file size (and download speed) is the main goal of ADVANCED_OPTIMIZATIONS and the compiler in general. – hyperslug Sep 05 '11 at 02:18
Smaller file size results often (but not always) in faster code. Dead code removal and inlining serves both purposes. – Blaise Jan 13 '13 at 09:31
Inlining does not always reduce file size if there is much invocation. – SOFe Jan 19 '19 at 16:47

score 5 · Answer 5 · answered Dec 01 '10 at 15:01

5

As of jQuery 1.4, Google's Closure Compiler is used as the default minification technique for jQuery releases. However, jQuery only uses the SIMPLE_OPTIMIZATIONS settings. The jQuery team has no plans to support ADVANCED_OPTIMIZATIONS.

answered Dec 01 '10 at 15:01

mndrix

2,853
1
26
20

2

Outdated: "However, we believe we can do even better than that, and would like to offer automated ways for any user to create an optimally minimized file that includes both application code and just the needed parts of jQuery. In particular, we are working with the Google Closure Compiler team to see if we could use its ADVANCED_OPTIMIZATIONS option. We’ll have more information on our progress as it develops." http://blog.jquery.com/2011/11/22/call-for-jquery-1-8-ideas/ – David Mulder Mar 30 '12 at 11:21

score 2 · Answer 6 · edited Nov 04 '11 at 17:58

2

Out of curiosity, I put together a SlickSpeed test of the latest Prototype and jQuery libs, shrunk with YUI and Closure. You can run the tests here.

As others have noted, compiling with ADVANCED_OPT does not work but if someone wants to do the work, I'll be happy to add the results to the SlickSpeed test.

edited Nov 04 '11 at 17:58

Nightfirecat

10,836
6
32
50

answered Nov 10 '09 at 06:38

Jauder Ho

1,305
1
16
22

Jourkey · Answer 7 · 2009-11-07T03:34:19.723

1

Doesn't Closure just minimize and renames vars? jQuery already has a .min version. Minifying with closure again will probably be minimally helpful and potentially dangerous.

Edit: I just did it.

Compilation was a success!

Original Size:  55.91KB (19.28KB gzipped)
Compiled Size:  54.05KB (18.28KB gzipped)
Saved 3.34% off the original size (5.18% off the gzipped size)

This is on top of the already mined version. There's a demo here: http://closure-compiler.appspot.com/home

edited Nov 07 '09 at 03:34

answered Nov 07 '09 at 03:26

Jourkey

29,462
23
59
78

Yes, JQuery already uses a minifier. I just read an article about how Prototype was recompiled using Closure, instead of YUI Compressor. The Closure version of Prototype was 60% smaller than what YUI Compressor produced. That's crazy small and create for speeding up web applications. – Ted Nov 07 '09 at 03:28
6

Theoretically, you could mix your JavaScript with jQuery and have Closure rename all of the `.click`,`.each` etc for additional savings. – Tinister Nov 07 '09 at 03:33
@Tinister, how would you do that. Wouldn't Closure then need to parse your HTML page to see what is called and what's not called – Ted Nov 07 '09 at 04:05
@Ted you'd include your code with jQuery all in one file and run the Closure Compiler against the whole shebang. – JasonWyatt Nov 07 '09 at 04:26
@Ted @Tinster, ah I'm realizing that it could be sketchy with the compiler possibly minifying (incorrectly) the selectors specified in your own usage of jQuery... It's worth trying out though. – JasonWyatt Nov 07 '09 at 04:28
What I mean is, what happens if from my HTML page, I don't call half of the functions found in JQuery. Shouldn't the Closure recognize this within my HTML document to then go and remove those functions from my .JS that are unused (within my JS). That's why I say, should Closure also be parsing my HTML page as well? – Ted Nov 07 '09 at 04:35
12

You don't put any JS in your HTML page. – hobbs Nov 07 '09 at 07:01
1

Closure Compiler doesn't just minimize and rename. If you compile a large JS program you'll see it is a recompile. It will put code inline where it makes sense to. It will reorganize complicated conditionals, etc. – Nosredna Nov 07 '09 at 22:47
Does everyone really think 3.34%-5.18% (1kb) is significant? – Jourkey Nov 16 '09 at 05:39

score 1 · Answer 8 · answered Nov 19 '09 at 09:19

1

I tried with their online compiler, it works well.

answered Nov 19 '09 at 09:19

Roch

20,993
27
74
118

score 1 · Answer 9 · answered Dec 07 '09 at 17:03

I used Closure (with ADVANCED_OPTIMIZATIONS) to compress the javascript code for a single-page site that I host and saw a significant size savings over the YUI Compressor. So I started looking into shrinking jQuery for that site as well, since it certainly doesn't use the entier jQuery library.

I get warnings every time I run jQuery through the compiler, mostly pointing out portions of the code that are not used. Even still, the compiled code doesn't work. The primary issue I see is that things aren't being exported properly by the compiler. I was able to easily export functions from my own code by attaching them to the window object, but I have not yet been able to do this yet with jQuery.

The good news is that John Resig is already experimenting with Closure. I suspect that we'll see new releases of both that are compatible in the near future.

score -1 · Answer 10 · answered Mar 10 '11 at 13:13

jQuery is not compatible (yet) with the Closure Compiler in advanced mode. I agree it would be a very good thing to make it compatible, because its method-chaining syntax lends very readily to prototype virtualization for much improved execution speed.

In fact, among the popular JavaScript libraries (other than Closure Library, that is), only the Dojo Toolkit is compatible with Closure Advanced mode.

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

jQuery compiled with Google Closure Compiler

10 Answers10

Linked

Related