All Ping

jQuery is undoubtedly the most popular JavaScript library, (almost) every website on this planet is using it. This affects jQuery to include all the functionalities within the library to cover every instance and possibility.

However, when we work on a simple website, we might only use a few of the functions. Thus, it would be more efficient if we were able to run only that necessary function and not everything other unused function as well. As of version 1.8, jQuery allows us to do this. We are able to exclude some jQuery modules that are not necessary in your project. So, let’s see how we can do it.

First Thing First

First, we need to install some tools required to do the job. These tools are Git, Grunt, and Node.js. If you running on OS X, the easiest way to install all these tools is through an OS X Package Manager called Homebrew.

Install Homebrew

So, let’s open up your Terminal and run the following command to install Homebrew. As said, Homebrew will let us install the other mentioned tools more easily.

Install Git

After the Homebrew installation completed, run the following command to install Git.

Install Node.Js

Run the following line to install Node.js

Install Grunt

Lastly, we need to install Grunt. Run this command.

Build JQuery

Currently, jQuery allows the following modules to be excluded.

Before we are able to customize the jQuery, we need to clone it from the Github repo by running this command in the Terminal.

You should then find a new folder named jquery created under your user folder. Navigate to that directory using this command

Next, we need to install Node dependencies modules to run our project.

We then build our jQuery by simply running Grunt command (and hit enter)

It will return the following report, if the operation succeeds.

And as we can see from the report, our jQuery is saved within the dist/ folder. Our jQuery is, at this point, set with all the functionalities, thus the size is quite large, 239kb. The minified version is at 83kb.

Removing Modules

Let’s say, we want to remove the Effect modules from jQuery; we can run this command.

If we take a look back at the file size, it is now decreased to 220 kb.

To exclude multiple modules, separate each module with a comma, for example:

Final Thought

jQuery can help us manipulate DOM easily, but with 200 kb more at the size, it could affect your website performance. So, by eliminating some unnecessary jQuery modules, your jQuery script will certainly run faster and more efficient. We hope that this little tip would be useful for your next project.