Site Optimization of clientlibs: loading only what is needed?

[johns43992246]

Hello,

I am seeing our javascript files minified are getting over 1MB and I am wondering if there any best practices for reducing the size of the clientlibs both javascript and css.

For example:

1. Are there ways to use lazy loading of scripts and styles and prioritizing a group of scripts for initiial load?

2. Are there ways to only load the scripts and styles needed for a given set of components you have loaded on the current page?

3. Other than eliminating errors, minifying and web optimizing images any other optimization strategies particularly for the clientlibs we can follow?

[EstebanBustamante]

Hi, 

What you can do is utilize code splitting by leveraging the webpack configurations. Here's a good example of how to do it: https://blog.3sharecorp.com/aem-code-splitting-dynamic-imports-typescript

Hope this helps.

[Harwinder-singh · Accepted solution]

@johns43992246 One way would be to create clientlibs at the component level so that you have component specific JS and CSS code instead of one big monolith file each for JS and CSS. You will have to decouple your CSS and JS code into component local and Global code. The piece of clientlib code that is applied across the board can still live in the current clientlib files that you have while anything component local can be created as a component level clientlib. Hope this helps.

[kautuk_sahni]

@johns43992246 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!