Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Clientlib javascript import with async or defer

Avatar

Avatar
Validate 10
Level 2
FernandoUchiyam
Level 2

Likes

4 likes

Total Posts

39 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 10
Level 2
FernandoUchiyam
Level 2

Likes

4 likes

Total Posts

39 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Applaud 5
View profile
FernandoUchiyam
Level 2

11-04-2019

Hi,

I am working on a project that needs to write the async or defer attributes to the JS import.

Basically, the resulting HTML should be something like this:

<link rel="stylesheet" href="/etc/clientlibs/my-site/all.css" async>

Notice the "async" word/attribute in the end of link tag above. It should be possible to use "defer" too.

I have found a library that can do this at Github (nateyolles/aem-clientlib-async), but unfortunately this code is not compatible with the latest AEM version and it also breaks the ACS Commons feature of Versioned Clientlibs.

Anyone has any idea?

Thanks

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 10
Level 2
FernandoUchiyam
Level 2

Likes

4 likes

Total Posts

39 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 10
Level 2
FernandoUchiyam
Level 2

Likes

4 likes

Total Posts

39 posts

Correct Reply

5 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
Applaud 5
View profile
FernandoUchiyam
Level 2

12-04-2019

Hi guys,

I found a solution and now I am able to use async with Javascript calls, and also have not lost the Versioned Clientibs feature from ACS Commons. I have done the following:

a) Used the `nateyolles/aem-clientlib-async` library, available at GitHub;

b) This lib is very old so you will need to make some changes to the code to use it with the latest AEM version (there are some hints in how to implement the fixes in the Pull Request tab from his Github);

c) The last change you have to do, to make it compatible with ACS Commons Versioned Clientlibs feature is this:

Open the `apps/clientlib-async/sightly/templates/ClientLibUseObject.java` file and add the type attribute to the JS and CSS constants. The contants should stay like this:

    private static final String TAG_JAVASCRIPT = "<script type=\"text/javascript\" src=\"%s\"%s></script>";

    private static final String TAG_STYLESHEET = "<link type=\"text/css\" rel=\"stylesheet\" href=\"%s\"%s>";

Notice that I have added type text/javascript and type text/css to the constants, they were not present in the original code. With that, the ACS Commons Versioned Clientlibs will work good together with the `async`.

Answers (3)

Answers (3)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,358 likes

Total Posts

3,228 posts

Correct Reply

918 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,358 likes

Total Posts

3,228 posts

Correct Reply

918 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

13-04-2019

It is great that it works.

I tried with below code as well, works for me, just a different approach but worked.

aem63app-repo/JSModel.java at master · arunpatidar02/aem63app-repo · GitHub

Screenshot 2019-04-13 at 11.59.13 PM.png

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,358 likes

Total Posts

3,228 posts

Correct Reply

918 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,358 likes

Total Posts

3,228 posts

Correct Reply

918 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

11-04-2019

Hi,

Can you check below jsp code to add clientlibs in page :

com.day.cq.widget.HtmlLibraryManager clientlibmanager = sling.getService(com.day.cq.widget.HtmlLibraryManager.class);

if(clientlibmanager != null)

{

    String[] categoryArray = {"headlibs"};

    java.util.Collection<com.day.cq.widget.ClientLibrary> libs = clientlibmanager.getLibraries(catArray,com.day.cq.widget.LibraryType.JS,false,false);

    for(com.day.cq.widget.ClientLibrary lib : libs) {

        out.write("<script async type=\"text/javascript\" src=\""+lib.getIncludePath(com.day.cq.widget.LibraryType.JS)+"\"></script>");

    }

} else {

         out.write("clientlib manager is null");

  }

java - CQ5 Remove Render-Blocking JavaScript - Stack Overflow

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

11-04-2019

I do not think AEM support defer of loading ClientLibs. If other AEM community members have done this, please provide the details.