Clientlibs | Community
Skip to main content
Madhur-Madan
Community Advisor
Madhur-MadanCommunity Advisor
Community Advisor
April 12, 2023
Solved

Clientlibs

  • April 12, 2023
  • 2 replies
  • 1257 views

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?

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 Sady_Rifat

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.

2 replies

ShaileshBassi
Community Advisor
ShaileshBassiCommunity Advisor
Community Advisor
April 12, 2023

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
    Community Advisor
    Sady_RifatCommunity AdvisorAccepted solution
    Community Advisor
    April 12, 2023

    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.

      Terms & ConditionsAccessibility statement

      Loading footer...