{"id":525,"date":"2023-10-27T07:01:07","date_gmt":"2023-10-27T07:01:07","guid":{"rendered":"http:\/\/upprofits.net\/?p=525"},"modified":"2024-08-30T11:29:16","modified_gmt":"2024-08-30T11:29:16","slug":"how-to-remove-unnecessary-jquery-modules","status":"publish","type":"post","link":"http:\/\/upprofits.net\/index.php\/2023\/10\/27\/how-to-remove-unnecessary-jquery-modules\/","title":{"rendered":"How to Remove Unnecessary jQuery Modules"},"content":{"rendered":"

jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes functionalities to cover every possible scenario.<\/p>\n

However, when working on a simple website, we might only use a few<\/strong> 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\u2019t needed for our project. Let\u2019s explore how to do this.<\/p>\n

Getting Started<\/h4>\n

First, we need to install essential tools for the task. These tools include Git<\/a>, Grunt<\/a>, and Node.js<\/a>. If you\u2019re using macOS, the most straightforward method to install these tools is through the macOS package manager, Homebrew<\/a>.<\/p>\n

Installing Homebrew<\/h5>\n

Open your Terminal and execute the following command to install Homebrew. With Homebrew, installing the other tools becomes simpler.<\/p>\n

\r\nruby -e \"$(curl -fsSL https:\/\/raw.github.com\/mxcl\/homebrew\/go)\"\r\n<\/pre>\n
Installing Git<\/h5>\n
Once Homebrew is installed, execute the command below to install Git.<\/p>\n
\r\nbrew install git\r\n<\/pre>\n
Installing Node.js<\/h5>\n
Use the following command to install Node.js:<\/p>\n
\r\nbrew install node\r\n<\/pre>\n
Installing Grunt<\/h5>\n
Finally, install Grunt by running the command below:<\/p>\n
\r\nnpm install -g grunt-cli\r\n<\/pre>\n
For Windows users, there\u2019s a comparable package manager named Chocolatey<\/a>. You can use it to install the aforementioned packages in a similar manner.<\/p>\n
Building jQuery<\/h4>\n
At present, jQuery allows the exclusion of the following modules:<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n
Module<\/td>\nCommand<\/td>\nDescription<\/td>\n<\/tr>\n<\/thead>\n
Ajax<\/td>\n-ajax<\/code><\/td>\nThis refers to the jQuery AJAX API<\/a>, which includes jQuery.ajax()<\/code>, jQuery.get()<\/code>, and the .load()<\/code> function.<\/td>\n<\/tr>\n
CSS<\/td>\n-css<\/code><\/td>\nThis pertains to functions from the jQuery CSS Category<\/a>, including .addClass()<\/code>, .css()<\/code>, and .hasClass()<\/code>.<\/td>\n<\/tr>\n
Deprecated<\/td>\n-deprecated<\/code><\/td>\nThis refers to the deprecated modules or functions.<\/td>\n<\/tr>\n
Event Alias<\/td>\n-event-alias<\/code><\/td>\nThis pertains to event functions<\/a> such as .click()<\/code>, .focus()<\/code>, and .hover()<\/code>.<\/td>\n<\/tr>\n
Dimensions<\/td>\n-dimensions<\/code><\/td>\nThis relates to the functions for setting CSS dimensions<\/a>, including .height()<\/code>, .innerHeight()<\/code>, and .innerWidth()<\/code>.<\/td>\n<\/tr>\n
Effects<\/td>\n-effects<\/code><\/td>\nThis refers to functions that apply animation effects, such as .slideToggle()<\/code>, .animate()<\/code>, and .fadeIn()<\/code>.<\/td>\n<\/tr>\n
Offset<\/td>\n-offset<\/code><\/td>\nThis pertains to functions that retrieve coordinates and position, including .offset()<\/code> and .position()<\/code>.<\/td>\n<\/tr>\n<\/table>\n<\/div>\n
Before customizing jQuery, we need to clone it from the GitHub repository. Execute the following command in the Terminal:<\/p>\n
\r\ngit clone git:\/\/github.com\/jquery\/jquery.git\r\n<\/pre>\n
A new folder named jquery<\/strong> will be created in your user directory. Navigate to this directory with the command:<\/p>\n
\r\ncd jquery\r\n<\/pre>\n
Next, install the Node dependency modules required for our project:<\/p>\n
\r\nnpm install\r\n<\/pre>\n
Then, build jQuery by simply executing the Grunt command:<\/p>\n
\r\ngrunt\r\n<\/pre>\n
If successful, the following report will be displayed:<\/p>\n
\"grunt<\/figure>\n
As indicated in the report, our jQuery is stored in the dist\/<\/code> folder. At this stage, our jQuery includes all functionalities, resulting in a size of 265kb<\/strong>. The minified version is 83kb.<\/p>\n
\"jquery<\/figure>\n
Module Removal<\/h4>\n
If you wish to remove the Effects module from jQuery, execute the following command:<\/p>\n
\r\ngrunt custom:-effects\r\n<\/pre>\n
Upon checking the file size again, you\u2019ll notice it has reduced to 246kb<\/strong>.<\/p>\n
\"jQuery<\/figure>\n
To exclude multiple modules, list each module separated by a comma, like so:<\/p>\n
\r\ngrunt custom:-effects,-ajax,-deprecated\r\n<\/pre>\n
Excluding multiple modules will further reduce the jQuery file size. In this instance, it\u2019s been reduced to just 207kb<\/strong>.<\/p>\n
Concluding Thoughts<\/h4>\n
jQuery facilitates easy DOM manipulation, but its size, exceeding 200kb, might impact your website\u2019s 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.<\/p>\n
The post How to Remove Unnecessary jQuery Modules<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery is undoubtedly the most popular JavaScript library. Almost every website on the planet uses it. Due to its widespread use, jQuery includes functionalities to cover every possible scenario. 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 […]<\/p>\n","protected":false},"author":1,"featured_media":528,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-525","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding"],"_links":{"self":[{"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/525"}],"collection":[{"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/comments?post=525"}],"version-history":[{"count":3,"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/525\/revisions"}],"predecessor-version":[{"id":534,"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/posts\/525\/revisions\/534"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/media\/528"}],"wp:attachment":[{"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/media?parent=525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/categories?post=525"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/upprofits.net\/index.php\/wp-json\/wp\/v2\/tags?post=525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}