Custom build jQuery

Tweet about this on TwitterShare on LinkedIn0Share on Google+2Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Did you know that you can generate your custom build of jQuery? I did a few days ago and I am totally digging it.

The final jQuery file which you download from the website consists of the following modules

  • ajax
  • css
  • deprecated
  • dimensions
  • effects
  • event
  • offset
  • wrap
  • core/ready
  • deferred
  • exports/global
  • exports/amd
  • sizzle

There would be projects, where you are not using all the modules. But, you are including the entire jQuery source file, which does not really justify the 248kb un-minified or 84kb minified download.

Screen Shot 2014-06-08 at 6.41.30 pmSo, the folks at jQuery made things easy for us, they provided a build script where we can specify the modules we do not want to use and a custom jQuery source will be generated for us.

Sounds simple and easy right? Let us give that a try.

Things you need

  1. Node Installed
  2. Grunt Installed
  3. Git Installed

Once these are setup, we will pull down the latest version of jQuery from their GitHub repo. Pick a suitable location where you want to download jQuery, open terminal/prompt and run

$ git clone https://github.com/jquery/jquery.git

Next,  CD into jquery folder and install the development dependencies by running

$ cd jquery && npm install

To build jquery.js with all the modules, run

$ grunt

This will generate a dist folder and you can see the jquery.js, jquery.min.js and jquery.min.map. This is what you get when you download jQuery. But what if you do not want a few modules. Say

  1. Ajax
  2. Deprecated and
  3. Offset

You can run

  $ grunt custom:-ajax,-deprecated,-offset

This will delete the old dist folder and create a new one, with specified modules removed.

And you can see that the file sizes have reduced. Screen Shot 2014-06-08 at 7.03.35 pmSweet right? So what modules remove what features? Here is a quick reference

  • ajax: All AJAX functionality: $.ajax(), $.get(), $.post(), $.ajaxSetup(), .load(), transports, and ajax event shorthands such as .ajaxStart().
  • ajax/xhr: The XMLHTTPRequest AJAX transport only.
  • ajax/script: The <script> AJAX transport only; used to retrieve scripts.
  • ajax/jsonp: The JSONP AJAX transport only; depends on the ajax/script transport.
  • css: The .css() method plus non-animated .show(), .hide() and .toggle(). Also removes all modules depending on css (including effects, dimensions, and offset).
  • deprecated: Methods documented as deprecated but not yet removed; currently only .andSelf().
  • dimensions: The .width() and .height() methods, including inner- and outer- variations.
  • effects: The .animate() method and its shorthands such as .slideUp() or .hide("slow").
  • event: The .on() and .off() methods and all event functionality. Also removes event/alias.
  • event/alias: All event attaching/triggering shorthands like .click() or .mouseover().
  • offset: The .offset(), .position(), .offsetParent(), .scrollLeft(), and .scrollTop() methods.
  • wrap: The .wrap(), .wrapAll(), .wrapInner(), and .unwrap() methods.
  • core/ready: Exclude the ready module if you place your scripts at the end of the body. Any ready callbacks bound with jQuery() will simply be called immediately. However, jQuery(document).ready() will not be a function and .on("ready", ...) or similar will not be triggered.
  • deferred: Exclude jQuery.Deferred. This also removes jQuery.Callbacks. Note that modules that depend on jQuery.Deferred(AJAX, effects, core/ready) will not be removed and will still expect jQuery.Deferred to be there. Include your own jQuery.Deferred implementation or exclude those modules as well (grunt custom:-deferred,-ajax,-effects,-core/ready).
  • exports/global: Exclude the attachment of global jQuery variables ($ and jQuery) to the window.
  • exports/amd: Exclude the AMD definition.
  • sizzle: The Sizzle selector engine. When this module is excluded, it is replaced by a rudimentary selector engine based on the browser’s querySelectorAll method that does not support jQuery selector extensions or enhanced semantics. See the selector-native.js file for details.

So, if you are using only the Ajax module of jQuery, you can run

$ grunt custom:-css,-deprecated,-dimensions,-effects,-event,-offset,-wrap

And the file sizes would reduce to

Screen Shot 2014-06-08 at 7.07.24 pm84kb vs 58kb – You decide 


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+2Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Bruno Seixas

    Those simple things that matter =)

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      True That.