How do I Remove Unnecessary jQuery Modules

How do I Remove Unnecessary jQuery Modules.

jQuery is undoubtedly the preferred JavaScript library. Almost each web site on the planet makes use of it. Due to its widespread use, jQuery contains functionalities to cowl each attainable situation.

However, when engaged on a easy web site, we would solely use just a few of those features. It could be more environment friendly to run solely the mandatory features and exclude the unused ones. We can exclude sure jQuery modules that aren’t wanted for our mission. Let’s discover how to do that.

Getting Started

First, we have to set up important instruments for the duty. These instruments embody Git, Grunt, and Node.js. If you’re using macOS, probably the most simple technique to put in these instruments is thru the macOS package deal supervisor, Homebrew.

Installing Homebrew

Open your Terminal and execute the next command to put in Homebrew. With Homebrew, putting in the opposite instruments turns into less complicated.

ruby -e "$(curl -fsSL"
Installing Git

Once Homebrew is put in, execute the command beneath to put in Git.

brew set up git
Installing Node.js

Use the next command to put in Node.js:

brew set up node
Installing Grunt

Finally, set up Grunt by operating the command beneath:

npm set up -g grunt-cli

For Windows customers, there’s a comparable package deal supervisor named Chocolatey. You can use it to put in the aforementioned packages in an analogous method.

Building jQuery

At current, jQuery permits the exclusion of the next modules:

Module Command Description
Ajax -ajax This refers back to the jQuery AJAX API, which incorporates jQuery.ajax(), jQuery.get(), and the .load() operate.
CSS -css This pertains to features from the jQuery CSS Category, together with .addClass(), .css(), and .hasClass().
Deprecated -deprecated This refers back to the deprecated modules or features.
Event Alias -event-alias This pertains to occasion features akin to .click on(), .focus(), and .hover().
Dimensions -dimensions This pertains to the features for setting CSS dimensions, together with .peak(), .innerHeight(), and .innerWidth().
Effects -effects This refers to features that apply animation results, akin to .slideToggle(), .animate(), and .fadeIn().
Offset -offset This pertains to features that retrieve coordinates and place, together with .offset() and .place().

Before customizing jQuery, we have to clone it from the GitHub repository. Execute the next command within the Terminal:

git clone git://

A brand new folder named jquery will probably be created in your person listing. Navigate to this listing with the command:

cd jquery

Next, set up the Node dependency modules required for our mission:

npm set up

Then, construct jQuery by merely executing the Grunt command:


If profitable, the next report will probably be displayed:

grunt report

As indicated within the report, our jQuery is saved within the dist/ folder. At this stage, our jQuery contains all functionalities, leading to a dimension of 265kb. The minified model is 83kb.

jquery report

Module Removal

If you want to take away the Effects module from jQuery, execute the next command:

grunt customized:-effects

Upon checking the file dimension once more, you’ll discover it has lowered to 246kb.

jQuery custom build

To exclude a number of modules, record every module separated by a comma, like so:

grunt customized:-effects,-ajax,-deprecated

Excluding a number of modules will additional scale back the jQuery file dimension. In this instance, it’s been lowered to simply 207kb.

Concluding Thoughts

jQuery facilitates simple DOM manipulation, however its dimension, exceeding 200kb, may influence your web site’s efficiency. By eradicating pointless jQuery modules, your script will undoubtedly run more effectively and quicker. We hope this tip proves useful to your upcoming tasks.

Check out more article on – How-To tutorial and latest highlights on – Technical News