How to load a specific JavaScript files on a web page in AEM? | Community
Skip to main content
A
Ameen_Dev
Level 4
June 14, 2022
Solved

How to load a specific JavaScript files on a web page in AEM?

  • June 14, 2022
  • 4 replies
  • 3276 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Nirmal_Jose

Hi Ameen,


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.

[1] - https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/


4 replies

Himanshu_Jain
Community Advisor
Himanshu_JainCommunity Advisor
Community Advisor
June 14, 2022

Use component level clientlibs

 

Himanshu Jain
    A
    Ameen_DevAuthor
    Level 4
    June 14, 2022

    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.

      Himanshu_Jain
      Community Advisor
      Himanshu_JainCommunity Advisor
      Community Advisor
      June 14, 2022

      Create a common clientlib which required across the webpages or page component based clientlib.

      And keep component specific clientlib separately .

      And if you want to reuse any existing clientlib then you can embed as well.

       

      refer https://github.com/AdobeDocs/experience-manager-cloud-service.en/blob/main/help/implementing/developing/introduction/clientlibs.md

      https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en

       

       

       

      Himanshu Jain
        milind_bachani
        Adobe Employee
        milind_bachaniAdobe Employee
        Adobe Employee
        June 14, 2022

        Hi @ameen_dev ,

         

        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.

        This is the blog which talks about when to use what implementation of clientlibs :
        http://www.sgaemsolutions.com/2017/06/clientlibs-in-aem63-part2_25.html

         

        Documentation on clientlibs can be found here :
        https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en

         

        Hope this helps.

         

        Thanks,

        Milind

          Nirmal_Jose
          Adobe Employee
          Nirmal_JoseAdobe EmployeeAccepted solution
          Adobe Employee
          June 14, 2022

          Hi Ameen,


          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.

          [1] - https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/


            Anmol_Bhardwaj
            Community Advisor
            Anmol_BhardwajCommunity Advisor
            Community Advisor
            June 14, 2022

            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.
              Terms & ConditionsAccessibility statement

              Loading footer...