clubmate.fi

How to build a custom lightweight 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 getting rid of unused modules, like Ajax for example, if you’re not using it.

You can do that with 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.

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.