Doubt about NgModule and Components

Hi!

I have read quite a lot in the forum about how to organize the components module in ionic.

As a summary of what I have read, the two forms that stand out are: To have a module by component or a module containing all the components, a disadvantage of this last case is that if you have an app with many components and only one of this components is used you are going to load many components when in fact you don’t use all of them.

My question is: Isn’t Tree Shaking supposed to trim what isn’t being used and therefore the final bundle only contains the code that is really needed?

https://angular.io/guide/entry-components

"For production apps you want to load the smallest code possible. The code should contain only the classes that you actually need and exclude components that are never used. For this reason, the Angular compiler only generates code for components which are reachable from the entryComponents; This means that adding more references to @NgModule.declarations does not imply that they will necessarily be included in the final bundle.

In fact, many libraries declare and export components you’ll never use. For example, a material design library will export all components because it doesn’t know which ones you will use. However, it is unlikely that you will use them all. For the ones you don’t reference, the tree shaker drops these components from the final code package.

If a component isn’t an entry component and isn’t found in a template, the tree shaker will throw it away. So, it’s best to add only the components that are truly entry components to help keep your app as trim as possible."

Greetings!

Hi, If I understand your question, you want to load only the pages, providers and components that are becoming needed. For do that you can use ionic lazy loading: https://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/.

Hi @RCODeGO

I will try to clarify it:

I have read is bad idea to have all components in only one NgModule because if you use i.e one component all rest components will be loaded too. But my question is: Isn’t Tree Shaking supposed to trim what isn’t being used and therefore the final bundle only contains the code that is really needed? Therefore isn’t bad idea to have all components in only one NgModule, right?

According to angular it is not a bad idea for build production. But I don`t sure if when you compile with ionic and the tag --prod it will use this system

Tree shaking and lazy loading are different things

Tree shaking is part of the bundle creation proces (aka compile time). The developer should not be concerned about that ideally as the bundler as suggested by ionic, angular etc should be the best u can get

Lazy loading is to ensure at runtime only the stuff is loaded is needed for the ui to be nice to the user.

Lazy loading required separting stuff in modules (angular style)

Besides that, modules help testability and reusability. Irrespective framework

Best experienced when building (multiple) large scale apps