If you have multiple Lightning Components on a Lightning Page/App with 3rd party libraries like jQuery,Bootstrap etc, you may face performance issues like slow loading, code conflicts, many others you don’t know.
Problems you may face while working with 3rd party libraries :
If you have 2 Lightning Components with different version of Libraries, they may conflict with each other.
If you are using same version, they may put unnecessary weight on Components which in turn load your component slowly.
So what could be the solution? The solution is to ensure that you really need to load 3rd party libraries or not.
Basically you should always avoid use of jQuery for very small things like getting element Id, Class, DOM manipulation and many others. To do these small things you have to import jQuery file in you component. Which will put unnecessary weight on your component.
Instead of this you can use getter setter methods provided by Framework or you can use VanillaJs.
You might be thinking what is “VanillaJs”?
VanillaJs is faster than jQuery see below comparison.
I know you may have to write few more lines of code in comparison to jQuery, but it is better than putting unnecessary weight on components by importing library.
Comparison of jQuery and Vanilla JS for basic DOM manipulation.
// jQuery $('.myClass'); // VanillaJs document.getElementsByClassName('myClass');
// jQuery $('#myID'); // VanillaJs document.getElementById('myID');
// jQuery $('div'); // VanillaJs document.getElementsByTagName('div');
Add and Remove Class
// jQuery $('div').addClass('myClass'); // VanillaJs var div = document.querySelector('div'); div.classList.add('myClass'); // jQuery $('div').removeClass('myClass'); // VanillaJs var div = document.querySelector('div'); div.classList.remove('myClass');
Add and Remove Attribute
// jQuery $('.myClass').attr('disabled', true); // VanillaJs document.querySelector('.myClass').setAttribute('disabled', true); // jQuery $('.myClass').removeAttr('disabled'); // VanillaJs document.querySelector('.myClass').removeAttribute('disabled');
Hope you will find VanillaJs better than jQuery with Lightning Components.