Optimization for google Lighthouse review

[tbouliere-datasolution]

Is your feature request related to a problem? If yes, please describe it.

The application currently performs very poorly in the google lighthouse test in mobile mode. It's true that it's very difficult to optimize angular applications for this test. Even more so with a generic application.

However, there are architectural choices that prevent us from making improvements in our projects:

• The "SharedModule" is huge, taking up 1/4 of the total size of the application.
• Impacting dependencies such as CDK or formly are loaded by default with the ShareModule
• Shell Module loads (even lazily) the SharedModule
• The CMS module automatically loads all components. If an impacting component (such as a product list with slider) is declared, it will be loaded on all pages, even if it is not used.
• Extensions for numerous dependencies. For example, order-template must be loaded on the homepage simply to present a button redirecting users to the order-template functionality.

Describe the desired solution.

• SharedModule should be splited
• Ideally, ShellModule should be self-sufficient.
• CMS component should be loaded lazily
• Extensions should export a light version of shared component for the homepage
• Page hierarchy should be splited as chunk per page with webpack
• Lazy load vendor dependancies should not by contains in vendors.js or common.js

Describe alternatives you've considered.

Splitting ShareModule and lazy loading CMS doesn't take so much time. The real difficulty lies in the extensions loaded on the home page.

A first cut has been made here as a poc (~ 4/5 hour of work): https://github.com/tbouliere-datasolution/intershop-pwa/tree/refactor/split-shared-module

Provide additional context.

Initial webpack bundle

Expected splitted webpack bundle

AB#94658