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. We are able to exclude some jQuery modules that are not necessary in your project. So, let’s see how we can do it.
Recommended Reading: Creating a Volume Controller with jQuery UI Slider
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 macOS, the easiest way to install all these tools is through an macOS Package Manager called 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.
ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
After the Homebrew installation completed, run the following command to install Git.
brew install git
Run the following line to install Node.js
brew install node
Lastly, we need to install Grunt. Run this command.
npm install -g grunt-cli
If you’re using Windows, there’s a similar Package Manager called Chocolatey which you can use to install the above packages in similar fashion.
Currently, jQuery allows the following modules to be excluded.
||This specifies the jQuery AJAX API that includes
||This specifies the functions from jQuery CSS Category that includes
||This specifies the deprecated modules or functions.|
||This specifies the event functions like
||This specifies the functions to set CSS dimension. Such functions include
||This specifes the functions that set animation effects, such as
Before we are able to customize the jQuery, we need to clone it from the Github repo by running this command in the Terminal.
git clone git://github.com/jquery/jquery.git
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, 265kb. The minified version is at 83kb.
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 246kb.
To exclude multiple modules, separate each module with a comma, for example:
And this will certainly decrease the jQuery file even further. In our case here, it’s reduced to just 207kb
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.