Is jQuery modular? How to trim it down?

Question

Compressed, jQuery is ~70KB in size (uncompressed: >200KB). I did not see a way to exclude rarely used parts of it like with jQuery UI. How can I reduce the (compressed and minified) file size of jQuery? I am quite concerned because dial-up lines and slow machines/browsers are very common among users of my site.

My main concern is parsing duration of the JavaScript in the browser. On older machines this takes hundreds of milliseconds. The network transfer is a one-time cost which makes this slightly more tolerable.

... And if you use the CDN version it's much smaller even than that over the average of all your users. Personally, I'm wondering how long until browsers start baking it in. — Joel Coehoorn, May 25 '10 at 15:48
See my question: http://stackoverflow.com/questions/1333465/is-it-possible-to-extract-a-subset-of-jquery — Skilldrick, May 25 '10 at 16:31

Patrick Karcher · Answer 1 · 2010-05-25T15:57:32.147

There is no service (such as for JQuery UI) where you can pick and choose functionality. But to help:

The minified version is less than 25k, which helps. The non-minified version should never really go down to the client machine.
Always reference it from the same location, and the client browser should cache it.
You can reference your javascript libraries after your html content, so that initial load should seem faster to the human.
reference your jquery library from a different domain than yours, like from google. There are several advantages to this:
- It is likely to get served form a location closer to your clients
- It increases the chance that it will be download in parallel to other resources, especially with older browsers that will only download 2 items from a domain at a time.
- It increases the chance that they won't have to load jQuery at all for your page, because it's already cached from this commonly-used site.

I guess there is no service because most plugins depend on all functionality being there. — usr, May 28 '10 at 20:32

score 5 · Answer 2 · answered May 25 '10 at 15:50

5

You can also let Google host jQuery for you, which gives you better caching, etc.

answered May 25 '10 at 15:50

Robusto

31,447
8
56
77

score 2 · Accepted Answer · answered Jan 17 '14 at 03:24

2

There is a jQuery builder which you can use to trim some parts of jQuery.

answered Jan 17 '14 at 03:24

niutech

28,923
15
96
106

score 2 · Answer 4 · answered May 25 '10 at 15:48

2

24kb minimized and gzipped are not worth the effort IMHO.

answered May 25 '10 at 15:48

jAndy

231,737
57
305
359

score 1 · Answer 5 · answered Jan 22 '15 at 02:47

Can't tell exactly when the change was made, but the JQuery team now allow developers to compile their own JQuery builds using Node JS. NPM (which is effectively part of Node now), and Grunt are perquisites.

The custom build process appears to allow developers to exclude key components like the .Ajax and .Effects modules.

Details can be found in the JQuery github project readme file.

https://github.com/jquery/jquery

score 1 · Answer 6 · answered May 25 '10 at 15:50

The minified version is 24kb minified and gzipped. jQuery UI is bundled seperately and it is modular and has a packager which allows you to choose which parts of jQuery UI you want included.

If you reference it from the google or microsoft CDN's then it will also get cached in the browser, for not just your site, but any site that uses the CDN.

score 0 · Answer 7 · answered May 25 '10 at 15:49

0

jQuery is not modular. Even with dial up I don't think 24kb is a big deal.

answered May 25 '10 at 15:49

Laplace

491
1
3
9

Is jQuery modular? How to trim it down?

7 Answers7

Linked