How do I Remove Unnecessary jQuery Modules.
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.
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.
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)"
Once Homebrew is put in, execute the command beneath to put in Git.
brew set up git
Use the next command to put in Node.js:
brew set up node
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.
At current, jQuery permits the exclusion of the next modules:
|This refers back to the jQuery AJAX API, which incorporates
jQuery.get(), and the
|This pertains to features from the jQuery CSS Category, together with
|This refers back to the deprecated modules or features.
|This pertains to occasion features akin to
|This pertains to the features for setting CSS dimensions, together with
|This refers to features that apply animation results, akin to
|This pertains to features that retrieve coordinates and place, together with
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:
Next, set up the Node dependency modules required for our mission:
npm set up
Then, construct jQuery by merely executing the Grunt command:
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.
If you want to take away the Effects module from jQuery, execute the next command:
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:
Excluding a number of modules will additional scale back the jQuery file dimension. In this instance, it’s been lowered to simply 207kb.
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