Client-Side Libraries | Webpack

[Prashanth_02a]

Hi Guys,

As you people know, In the latest AEM projects which are built using the latest maven archetype, The Client libraries( multiple css and js files) which are written in ui.frontend module are compiled into a single clientlib category(client-site).

Will that not impact page performance ?

Because all unnecessary css and js code is included on all pages irrespective of whether those components are used on pages or not. Please help me. 

[Nishant-Singh]

There are some Pros and cons - 

pros -

1. Fewer HTTP Requests: Combining multiple CSS and JS files into a single client library reduces the number of HTTP requests required to load the resources. Fewer requests can improve page load times, especially on slower network connections or devices with higher latency.

2. Smaller File Size: Minification removes unnecessary characters and spaces from CSS and JS files, reducing their file size. Smaller file sizes mean faster downloads, which can contribute to improved page loading speed.

3. Caching Benefits: When properly configured, concatenated and minified client libraries can leverage browser caching more effectively. If the client library content rarely changes, it can be cached in the browser for an extended period, leading to faster subsequent page loads for returning users.

4. Gzip Compression: AEM often uses Gzip compression to further reduce the size of transmitted files. Concatenated and minified files compress better, which reduces the data transferred over the network.

Cons -

1. Reduced Parallel Loading: While combining files helps reduce HTTP requests, it may lead to longer initial rendering times for large files, as browsers limit the number of parallel requests they make to a server. This is known as the "head-of-line blocking" issue.

2. Granularity and Maintainability: Combining all CSS and JS into a single client library can reduce granularity, making it harder to isolate and manage individual components' styles and scripts. Be mindful of maintenance challenges if multiple components rely on the same client library.

3. Cache Invalidation: Changing a single file in a concatenated and minified client library requires invalidating the entire library's cache, potentially affecting unrelated components' performance.

4. Code Sharing: Combining files can lead to sharing code across multiple pages, which can be beneficial in terms of caching, but it may also include unnecessary code for some pages, impacting performance.

Overall its up to you to decide which one you need to follow based on number of components, JS & CSS code for those components etc. based on that you can make decision that whether you want to go with single clientlib or you can create different clientlibs like one for common code across all the templates and then template specific clientlibs that will include only js and css based on components used on that template. this can be done by webpack scripts.

[AsifChowdhury · Accepted solution]

Hi @Prashanth_02a 

There are some advantages and disadvantages in both cases:

Separate Client Libraries:

Pros:

1. Granular Control: With separate client libraries for individual components, you have more control over which resources are loaded on specific pages. This allows you to optimize the performance by loading only the necessary CSS and JS for each page.

2. Reduced Page Size: By loading only the required resources, the page size can be minimized, resulting in faster page loading times and improved user experience.

3. Cache Efficiency: Separating client libraries for different components enables better caching efficiency. Components with infrequent changes won't affect the cache of other components.

Cons:

1. More HTTP Requests: Separate client libraries may lead to more HTTP requests on the page, which could slightly impact initial load times. However, HTTP/2 and proper resource management can mitigate this to some extent.

2. Development Overhead: Managing multiple client libraries might require additional effort in organizing and maintaining the resources for each component.

Single Client Library:

Pros:

1. Fewer HTTP Requests: A single client library results in fewer HTTP requests, which can be beneficial for initial page load performance.

2. Simplified Management: Having all resources in one place can make resource management and deployment easier.

3. Cache Efficiency: A single client library can utilize browser caching more effectively since the same library is used across multiple pages.

Cons:

1. Bigger Initial Payload: A single client library may contain resources that are not required on every page, resulting in a larger initial payload. This can lead to longer page load times.

2. Overhead for Unused Resources: If components have different dependencies, including unnecessary resources can lead to wasted overhead.

3. Reduced Granularity: With a single client library, you have less control over what resources are loaded on specific pages. This may result in loading unused resources and affect performance.

We should choose any of the approaches according to the requirements and business.