Clientlibs

[Madhur-Madan]

Hi Team,

Should we add the js and css related to components in the ui.frontend folder which is rendered in clientlibs-site on build or should we create the component specific clientlibs for each component?

What is the preferred approach and why wrt the number of js calls, speed and performance?

[Shailesh_Bassi_]

Hi @Madhur-Madan It is always preferred to have one for the entire template. Otherwise the no of calls will get increased and that will also impact your performance.

It is totally dependent on the architecture design you choose.

Hope this helps!

Thanks

[Sady_Rifat · Accepted solution]

In both cases there are some pros and cons:

Integrate into the same clientlib:

Pros:

• Single network call

Cons:

• In various site performance sites (Google Pagespeed) you will get a warning for a bigger file. It will become render-blocking
• Unused CSS and JS will load every time

Single Clientlib load with component:

Pros:

• Only load those clientlibs that are used on the page
• No render-blocking loading

Cons:

• Many network call

In terms of performance, Cache can help both cases. 

My opinion: If your site is small then you can go for the same clientlib option. Other than use component-wise clientlib to get rid of load unnecessary JS and CSS.