Comment

Avatar

Level 4

08-09-2021

HI @Jörg_Hoh 

Thanks for your reply. I have been successful in achieving below feature myself:

  1. ui.frontend generates 1 single client lib - I am able to successfully modularize this using webpack and clientlib config.
  2. When clientlib is loaded at component level (instead of template level), it results in multiple JS/CSS calls in body tag - Using an interceptor I am able to load all CSS on head and all JS at the end of body tag. This has resulted in considerable performance improvement also retaining modularity. (Check the bar graph in my post)

What I am not able to do is, dynamically load vendor dependencies:

Example:

Scenario 1: Page 1 loads Clib1 and Clib2. Clib1 needs Jquery and Bootstrap

Scenario 2: Page 2 loads Clib3 and Clib4. Clib3 needs only Jquery

In this case vendor.js will be same. You will be loading Bootstrap in Page 2 also thereby bloating the page.