Hello,
We have an Angular SPA app that we have been using with the NG SDK for our frontend to our onsite CMS instance. Since the start, we have been following the documentation where we add the components to the app.module and the mappings array for the SDK. As we have built more and more components for different types of content on the site we have noticed that our bundle size has gotten fairly large (around 9mb) and is starting to impact site load times.
We have done some research and have found that the new Angular Ivy compiler and Webpack support code-splitting at the component level for lazy loading of components outside of the typical angular lazying loading via routes.
We have built a POC with the current SDK by creating a dynamic loading component that handles the lazy loading import. In our Component mappings array for each component we want to lazy load we reference this dynamic loading component instead of the angular component that should be loaded. the DLC then has its own set of mappings of cms component labels to import statements to load the component and it also injects the page and component data from the page model API.
Before we continue to re-structure our app we wanted to check and see if anyone else has a different way of doing this or if there are any plans for supporting this natively in the SDK? We would be happy to share more details around our POC if needed.