Site Optimization of clientlibs: loading only what is needed?

Question

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?

Harwinder-singh · Accepted Answer

@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.

EstebanBustamante · Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded