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
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.
Sounds simple and easy right? Let us give that a try.
Things you need
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
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
- Deprecated and
You can run
$ grunt custom:-ajax,-deprecated,-offset
This will delete the old dist folder and create a new one, with specified modules removed.
- ajax: All AJAX functionality:
.load(), transports, and ajax event shorthands such as
- 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
.toggle(). Also removes all modules depending on css (including effects, dimensions, and offset).
- deprecated: Methods documented as deprecated but not yet removed; currently only
- dimensions: The
- effects: The
.animate()method and its shorthands such as
- event: The
.off()methods and all event functionality. Also removes
- event/alias: All event attaching/triggering shorthands like
- offset: The
- wrap: The
- 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 (
- 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
querySelectorAllmethod 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
Thanks for reading! Do comment.