How to avoid redundant Js and CSS in AEM

Avatar

Avatar
Ignite 1
Level 1
ajeemaww9196509
Level 1

Likes

0 likes

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back
View profile

Avatar
Ignite 1
Level 1
ajeemaww9196509
Level 1

Likes

0 likes

Total Posts

11 posts

Correct reply

0 solutions
Top badges earned
Ignite 1
Give Back
View profile
ajeemaww9196509
Level 1

19-12-2019

Im developing Component based css & js rather using common resources. Lets say Im using 2 Breadcrumb components in a single page. So here how can I avoid those redundant css and js which are calling for both components. 

View Entire Topic

Avatar

Avatar
Boost 3
Level 1
sourcedcode
Level 1

Likes

4 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 3
Boost 1
View profile

Avatar
Boost 3
Level 1
sourcedcode
Level 1

Likes

4 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 3
Boost 1
View profile
sourcedcode
Level 1

19-12-2019

Hello @ajeemaww9196509,

You're Safe! AEM's client library call script is smart enough to only load in ONE instance of a client library that is being called into a page.

Try having ONE centralised client library (named of clientlib-site), and have that client library embed all the respective client libraries that you are trying to get CSS and JavaScript to load. This is a basic standard practice for AEM sites; take a look at Adobe's template project, where they have a client library called client-base which embeds multiple client libraries - https://github.com/adobe/aem-project-archetype/blob/master/src/main/archetype/ui.apps/src/main/conte.... A common practice is to call client libraries from "base page component" and "editable template policies"; as CSS is loaded before the body, and JS is loaded before when the </body> closes. In special cases, you can embed client libraries called directly into a component, however your rendered HTML static page will have client libraries requests tags in random parts of the code.

To learn more about how to call a client library, checkout Adobe's own knowledge post - https://blogs.adobe.com/experiencedelivers/experience-management/htl-clientlibs/