However, when working on a simple website, we might only use a few of these functions. It would be more efficient to run only the necessary functions and exclude the unused ones. We can exclude certain jQuery modules that aren’t needed for our project. Let’s explore how to do this.
First, we need to install essential tools for the task. These tools include Git, Grunt, and Node.js. If you’re using macOS, the most straightforward method to install these tools is through the macOS package manager, Homebrew.
Open your Terminal and execute the following command to install Homebrew. With Homebrew, installing the other tools becomes simpler.
ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
Once Homebrew is installed, execute the command below to install Git.
brew install git
Use the following command to install Node.js:
brew install node
Finally, install Grunt by running the command below:
npm install -g grunt-cli
For Windows users, there’s a comparable package manager named Chocolatey. You can use it to install the aforementioned packages in a similar manner.
At present, jQuery allows the exclusion of the following modules:
||This refers to the jQuery AJAX API, which includes
||This pertains to functions from the jQuery CSS Category, including
||This refers to the deprecated modules or functions.|
||This pertains to event functions such as
||This relates to the functions for setting CSS dimensions, including
||This refers to functions that apply animation effects, such as
||This pertains to functions that retrieve coordinates and position, including
Before customizing jQuery, we need to clone it from the GitHub repository. Execute the following command in the Terminal:
git clone git://github.com/jquery/jquery.git
A new folder named jquery will be created in your user directory. Navigate to this directory with the command:
Next, install the Node dependency modules required for our project:
Then, build jQuery by simply executing the Grunt command:
If successful, the following report will be displayed:
As indicated in the report, our jQuery is stored in the
dist/ folder. At this stage, our jQuery includes all functionalities, resulting in a size of 265kb. The minified version is 83kb.
If you wish to remove the Effects module from jQuery, execute the following command:
Upon checking the file size again, you’ll notice it has reduced to 246kb.
To exclude multiple modules, list each module separated by a comma, like so:
Excluding multiple modules will further reduce the jQuery file size. In this instance, it’s been reduced to just 207kb.
jQuery facilitates easy DOM manipulation, but its size, exceeding 200kb, might impact your website’s performance. By removing unnecessary jQuery modules, your script will undoubtedly run more efficiently and faster. We hope this tip proves beneficial for your upcoming projects.