Component specific client-library in ui.frontend project and better dependency management for client libraries.
1. Currently, all the code written in ui.frontend will be bundled as 2 client libraries i.e: clientlib-site and vendors. These client libraries will be loaded in all pages. There is no way to selectively load only certain components OOTB. This leads to sub-optimal lighthouse scores because unused CSS and JS code on page. Hence, there has to be modularity in the clientlibs generated from ui.frontend project. This can be achieved through proper webpack configurations
2. Currently there are two ways to load client libraries
i) At template level: This is recommended because it ensures all CSS wil be loaded at the top (in head) and all JS will be loaded at the bottom. But this gives rise to unused JS and CSS code on page as there is no option to include only those clientlibs which is needed on a particular page.
ii) At component level: This ensures that only required CSS/JS will be loaded. If a particular component is not loaded, corresponding CSS/JS will not load. But, with this approach render blocking CSS and JS code is loaded in body tag which is not recommended.
Hence there needs to be an approach to fix both of this performance issues. If there can be a way to dynamically load client libs (and its dependencies) based on components present on page, this will highly improve page performance.
All ui.frontend code is bundled into 1 single clientlib and is loaded on all pages
Single vendor client contains many dependencies which may not be required in all pages
Loading clientlibs at template level causes unused JS/CSS to be present on pages. If loaded at component level it causes render blocking calls hampering the performance.
ui.frontend should have modular structure and there should be component specific client libs.
Vendor clientlib should be generate dynamically to include only necessary dependencies
Ability to load only required clientlibs on page at component level. Also these clientlibs need to be loaded in 1 single request.
Environment Details (AEM version/service pack, any other specifics if applicable):
Screenshot (if applicable):
Without optimization: Clientlibs loaded at component level.
With optimization: I have used an interceptor to group all CSS in head section and all JS to the bottom of the body tag.