Can we async or defer referencing Client side Libraries | Community
Skip to main content
JakeCham
JakeCham
Level 6
Mar 15, 2021 2:46 PM UTC
Solved

Can we async or defer referencing Client side Libraries

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.
Asutosh_Jena_
Asutosh_Jena_Accepted solution
New Participant
Mar 15, 2021 3:22 PM UTC

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

View reply

6 replies

BrianKasingli
BrianKasingli
New Participant
Mar 15, 2021 6:22 PM UTC

@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.

Translate
    Pawan-Gupta
    Pawan-Gupta
    Level 8
    Mar 15, 2021 3:29 PM UTC

    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!!

    Translate
      Rohit_Utreja
      Rohit_Utreja
      New Participant
      Mar 15, 2021 3:27 PM UTC

      @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

       

      Translate
        Asutosh_Jena_
        Asutosh_Jena_Accepted solution
        New Participant
        Mar 15, 2021 3:22 PM UTC

        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

        Translate
          kautuk_sahni
          kautuk_sahni
          Employee
          Mar 16, 2021 1:00 PM UTC
          @asutosh_jena_, thank you for sharing the answer. Keep on answering the questions in the AEM community. AEM community needs SMEs like you.
          Translate
          Kautuk Sahni
          Terms & ConditionsAccessibility statement

          Loading footer...