I am trying to load only the specific JavaScript files on a web page in AEM?
For example:-
I have 50 JavaScript for my entire website but I need to load only the 2 Scripts instead of loading the whole 50 scripts. In this case, how do I achieve it?
From the description how I understand your scenario is ' You have 50 component specific JS files but some pages just need 2 of them in some scenario. You don´t want to load all the 50 together where you use only two ´.
We can achieve this in two ways
1. Using various tagging capabilities of client libraries in AEM. You can create separate category tags for the various groupings of component clientlibs and you can load them on a template level. This is applicable only in scenarios where you have usage of these components are fixed and you have specific templates for these usecases/groupings. 2. You can use a dynamic import logic using the power of ui.frontend module and webpack. Please refer to [1]. Please note this is not an Adobe supported pattern.
The first approach is OOTB, but please note this has an impact on authoring experience as well. Authors needs to change the template properties if add/remove clientlibs OR they are limited to building an experience only with a limited set of components for specific templates.
Is this a good practice for big websites? or any other way to do this? Because if we are loading the entire scripts for a web page, where it only needed two scripts, then the performance might be affected.
Please explain the following line - "Because if we are loading the entire scripts for a web page, where it only needed two scripts" . What is entire script here?
Are you talking about template specific JavaScript files only?
There is no generic solution implementation to put clientlibs, it varies on every usecase.
However, AEM has support to have component level clientlibs, template level clientlibs, embed clientlibs, dependent clientlibs to manage all types of use-cases.
From the description how I understand your scenario is ' You have 50 component specific JS files but some pages just need 2 of them in some scenario. You don´t want to load all the 50 together where you use only two ´.
We can achieve this in two ways
1. Using various tagging capabilities of client libraries in AEM. You can create separate category tags for the various groupings of component clientlibs and you can load them on a template level. This is applicable only in scenarios where you have usage of these components are fixed and you have specific templates for these usecases/groupings. 2. You can use a dynamic import logic using the power of ui.frontend module and webpack. Please refer to [1]. Please note this is not an Adobe supported pattern.
The first approach is OOTB, but please note this has an impact on authoring experience as well. Authors needs to change the template properties if add/remove clientlibs OR they are limited to building an experience only with a limited set of components for specific templates.
It looks like you have all the clientlibs in a single category.
Or you have added all the categories in all the pages.
To overcome this,
You can :
Break down the clientlibs into relevant categories and call them on the component level & the template level.
If you have a single script which is built through webpack, you can tweak the webpack file and then break it down into smaller scripts and place them in crx and assign different categories.
