How do I Remove Unnecessary jQuery Modules

Contents

Getting Started

How do I Remove Unnecessary jQuery Modules.

jQuery is undoubtedly the preferred JavaScript library. Almost each web site on the planet makes use of it. Due to its widespread use, jQuery contains functionalities to cowl each attainable situation.

However, when engaged on a easy web site, we would solely use just a few of those features. It could be more environment friendly to run solely the mandatory features and exclude the unused ones. We can exclude sure jQuery modules that aren’t wanted for our mission. Let’s discover how to do that.

Getting Started

First, we have to set up important instruments for the duty. These instruments embody Git, Grunt, and Node.js. If you’re using macOS, probably the most simple technique to put in these instruments is thru the macOS package deal supervisor, Homebrew.

Installing Homebrew

Open your Terminal and execute the next command to put in Homebrew. With Homebrew, putting in the opposite instruments turns into less complicated.

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Installing Git

Once Homebrew is put in, execute the command beneath to put in Git.

brew set up git

Installing Node.js

Use the next command to put in Node.js:

brew set up node

Installing Grunt

Finally, set up Grunt by operating the command beneath:

npm set up -g grunt-cli

For Windows customers, there’s a comparable package deal supervisor named Chocolatey. You can use it to put in the aforementioned packages in an analogous method.

Building jQuery

At current, jQuery permits the exclusion of the next modules:

Module	Command	Description
Ajax	`-ajax`	This refers back to the jQuery AJAX API, which incorporates `jQuery.ajax()`, `jQuery.get()`, and the `.load()` operate.
CSS	`-css`	This pertains to features from the jQuery CSS Category, together with `.addClass()`, `.css()`, and `.hasClass()`.
Deprecated	`-deprecated`	This refers back to the deprecated modules or features.
Event Alias	`-event-alias`	This pertains to occasion features akin to `.click on()`, `.focus()`, and `.hover()`.
Dimensions	`-dimensions`	This pertains to the features for setting CSS dimensions, together with `.peak()`, `.innerHeight()`, and `.innerWidth()`.
Effects	`-effects`	This refers to features that apply animation results, akin to `.slideToggle()`, `.animate()`, and `.fadeIn()`.
Offset	`-offset`	This pertains to features that retrieve coordinates and place, together with `.offset()` and `.place()`.

Before customizing jQuery, we have to clone it from the GitHub repository. Execute the next command within the Terminal:

git clone git://github.com/jquery/jquery.git

A brand new folder named jquery will probably be created in your person listing. Navigate to this listing with the command:

cd jquery

Next, set up the Node dependency modules required for our mission:

npm set up

Then, construct jQuery by merely executing the Grunt command:

grunt

If profitable, the next report will probably be displayed:

As indicated within the report, our jQuery is saved within the dist/ folder. At this stage, our jQuery contains all functionalities, leading to a dimension of 265kb. The minified model is 83kb.

Module Removal

If you want to take away the Effects module from jQuery, execute the next command:

grunt customized:-effects

Upon checking the file dimension once more, you’ll discover it has lowered to 246kb.

To exclude a number of modules, record every module separated by a comma, like so:

grunt customized:-effects,-ajax,-deprecated

Excluding a number of modules will additional scale back the jQuery file dimension. In this instance, it’s been lowered to simply 207kb.

Concluding Thoughts

jQuery facilitates simple DOM manipulation, however its dimension, exceeding 200kb, may influence your web site’s efficiency. By eradicating pointless jQuery modules, your script will undoubtedly run more effectively and quicker. We hope this tip proves useful to your upcoming tasks.

Check out more article on – How-To tutorial and latest highlights on – Technical News