clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

How to build a custom lightweight jQuery

Filed under: JavaScript— Tagged with: jquery

Size of jQuery can be reduced a bit by using the slim build.

Slim build for jQuery 3.x version

I think it was on the version 3.1.1 when jQuery made available the slim build. You can download the slim bersion from the downloads section of their website.

The slim build of jQuery excludes: ajax, effects, and currently deprecated code. And it’s about 23.6k vs. the normal 30k.

Using the jQuery builder for older jQuery versions

Especially the 2.x of jQuery, can be stripped down to be quite light, by by getting rid of unused modules, like Ajax for example, if you’re not using it, that is.

A tool to do that is the aptly named jquery-builder, which is a node app (if you don’t have Node installed yet, simply get the installer and double click it).

Get the jquery-builder with npm:

$ npm install -g jquery-builder

The syntax is as follows:

jquery-builder --exclude <module>,<module2> > output-file.js

If run without specifying the output file, it just barfs it into the command prompt, and it can be copied from there. --exclude will define the modules wanted to be dropped.

This command drops effects and ajax:

$ jquery-builder --exclude effects,ajax > jquery-light.js

By default the version is 1.11.1 (at the moment of writing this), the 2.x can be used with the --version option:

$ jquery-builder --exclude effects,ajax --version 2.1.1 > jquery-2.1.1.js

Note that not all the version are available via the builder, here’s a list. Also note that specifying -v 2.0 won’t work, it needs to be exactly -v 2.0.0, the builder isn’t very smart like that.

Here’s all the options:

Options:
  -e, --exclude   Modules to exclude [module,module]  [string]
  -m, --minify    Minify output                       [boolean]
  -l, --ls        List available modules              [boolean]
  -v, --version   Version of jQuery                   [string]  [default: "1.9.1"]
  -s, --versions  List available versions

What does each missing module do then?

You can get a pretty good idea by looking the jQuery docs.

GUI

There's also a jQuery Builder website.

Screenshot of the jQuery builder GUI

Conclusions

You can shave off little bit of weight from jQuery, but honestly not too much. We should not forget that the page also needs to execute the code, not only download it, which can be laborious for older phones. So it makes sense.

Comments would go here, but the commenting system isn’t ready yet, sorry. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • console.log('Smash the patriarchy!')
  • I love u!