Can we async or defer referencing Client side Libraries | Community
Skip to main content
JakeCham
JakeCham
Level 6
March 15, 2021
Solved

Can we async or defer referencing Client side Libraries

  • March 15, 2021
  • 4 replies
  • 2631 views

Hi Team,

I'm trying to load a client library using a helper template provided by AEM.

<sly data-sly-use.x="/libs/granite/sightly/templates/clientlib.html">

      <sly data-sly-call=${clientlib.js @@categories='x'}/>

</sly>

 

Do we need to still defer this if so how we can do it ?

 

Thanks

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 Asutosh_Jena_

Hi @jakecham 

As of now this is not supported on any version of AEM as per Adobe. Few months back I too reached out to Adobe with similar query and they asked us to do some custom implementation on our own as they do not have any such implementation available OOTB.
Please refer https://github.com/nateyolles/aem-clientlib-async for reference.

Thanks,
Asutosh

4 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community AdvisorAccepted solution
Community Advisor
March 15, 2021

Hi @jakecham 

As of now this is not supported on any version of AEM as per Adobe. Few months back I too reached out to Adobe with similar query and they asked us to do some custom implementation on our own as they do not have any such implementation available OOTB.
Please refer https://github.com/nateyolles/aem-clientlib-async for reference.

Thanks,
Asutosh

    JakeCham
    JakeChamAuthor
    Level 6
    June 3, 2022

    Hi Asutosh_Jena_ 

    Thank you for the response. Tried the above solution where dependencies and embedded categories are not building as clientlibs .Only specified categories are coming when we used newly created template ''/apps/clientlib -async/sightly/templates/clientlib.html''. Any input highly appreciated.

     

    Rohit_Utreja
    Community Advisor
    Rohit_UtrejaCommunity Advisor
    Community Advisor
    March 15, 2021

    @jakecham ,

     

    If you want to add any attribute in the clientlib load syntax, it needs to be customized.

    Please refer to the below link to add 'defer' or 'async' in clientlib.

    https://github.com/nateyolles/aem-clientlib-async

    http://www.nateyolles.com/blog/2016/06/custom-aem-html5-async-clientlibs

     

      Pawan-Gupta
      Pawan-Gupta
      Level 8
      March 15, 2021

      Hello,

       

      That's correct, you have to do custom implementation. I have done similar via sightly and biding the config properties from clientlibraries node to process accordingly.

       

      https://github.com/nateyolles/aem-clientlib-async

       

      share if you need more details.

       

      THanks!!

        BrianKasingli
        Community Advisor and Adobe Champion
        BrianKasingliCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        March 15, 2021

        @jakecham there are two scenarios.

        Scenario 1, where the client library has no dependencies

        With scenario one, simple implementation with no dependencies, you can simply call the absolute path to the client library, for example:

         

        <script defer src="/etc.clientlibs/my-site/clientlibs/clientlib-site.js"></script>

         

         

        Scenario 2, the client library has dependencies

        then like what the others say, nateyolle's solution looks like an option.

          Terms & ConditionsAccessibility statement

          Loading footer...