Take Out Unnecessary Modules In jQuery

jQuery is undoubtedly the most popular JavaScript library, (almost) every website on the planet uses it. This affects the fact that jQuery includes all the functions of the library to cover each instance and possibility.

However, when we are working on a simple website, we can only use some of its features. Therefore, it would be more efficient to be able to perform only this necessary function and not all other unused functions. We can exclude some jQuery modules that are not needed in your project. So, let’s see how we can do it.

First of all

First we need to install some tools necessary for work. These tools are Git, Grunt and Node.js. If you are working on macOS, the easiest way to install all these tools is to use a macOS package manager called Homebrew.

Install Homebrew

So let’s open your Terminal and run the following command to install Homebrew. As I said, with Homebrew we can install the other tools mentioned more easily.

Install Git

Once the Homebrew Installation is complete, run the following command to install Git.

Install nodes.js

Run the following line to install the node.js

Install Grunt

Finally, we need to install Grunt. Run this command. If you are using Windows, there is a similar package manager called Chocolatey, which allows you to install the above packages in the same way.

Create jQuery

Currently, jQuery can exclude the following modules.

Before we can customize the jQuery, we must clone it from the Github repository by running this command in the Terminal.
You should then find a new folder named jquery that has been created under your user folder. Use this command to access this directory.
Next, we need to install node dependency modules to run our project.
We then create our jQuery by simply executing the Grunt command (and pressing Enter)
The following report is returned if the operation is successful.

And as we can see in the report, Our query is stored in the dist/ folder. Our jQuery is defined with all the features at this point, so the size is quite large with 265 KB. The reduced Version is 83 KB.

Delete the modules

Let’s say we want to remove the effects modules from jQuery. We can execute this command.
If we look back on the file size, it has now dropped to 246 KB.
To exclude multiple modules, separate each module with a comma.
And this will definitely reduce the jQuery file even more. In our matter here, it is reduced to only 207 KB

Last Thought

jQuery can help us to manipulate DOM easily, but with 200 KB more in size, it can affect the performance of your website. So, if you eliminate some unnecessary jQuery modules, your jQuery script will certainly be executed faster and more efficiently. We hope that this little tip will be useful for your next project.