23-09-2021
- Mark as New
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report
What is needed from archetype modularity perspective?
Ability to generate modular client libraries from ui.frontend folder.
I am able to achieve this by making changes in webpack config and clientlib config. But it will be good to have this in archetype.
What is needed from product perspective?
In order to reduce the number of js/css calls in HTML, the recommended ways to load client libs is to bundle multiple clientlibs into 1 client (using embed) and load it in template level.
Scenario 1
There is a JS/CSS heavy component which is not needed on every page. Ex: shop locator component.
Problem 1: If I load this with embed at template, then this heavy JS/CSS will be unnecessary loaded on pages where it is not needed.
Problem 2: If I load this with at component level, since css/js is render blocking, it goes against the principle of loading css on head and JS at bottom. And if there are multiple such components, it increases the number of CSS and JS.
Hence here is the first expectation from product perspective:
A way (interceptor/transformer?) to collate all component level clientlib inclusion, and pushes the css to head and JS to the bottom of the page while rendering a page.
Scenario 2:
(Extension of scenario 1) There are multiple JS/CSS heavy components which is not needed on every page.
1. Page 1 has comp1 which has dependency1, dependency2
2. Page 2 has comp2 has dependency1, dependency3
If you use webpack to create vendor packages, it will generate a vendor package consisting of dependency1+dependency2+dependency3.
Problem: If you load vendor clientlib on page1 and page2, you are loading unnecessary dependencies on both pages leading to longer page load time.
Hence the second expectation from product perspective:
A way to identify dependencies of clientlibs and bundle the dependencies dynamically.
Hope this clarifies. Thanks