Are angular-material modules automatically tree-shaked?

user_4232036 0
Viewed 605

I saw angular-material individual modules imported in two ways.

  1. import all angular-material modules (MatButtonModule, MatRadioModule, etc.) into a huge angular-material.module and then import that module into any Angular module that needs some angular-material stuff.
  2. Import the individual material modules into their respective modules, where there are used. For example I will import the ReactiveFormsModule in my RegistrationModule (where user fills out the registration form), but I will not import it in other lazy loaded modules, where there are no forms.

The second option seems to me tedious and hard to maintain, therefore I prefer the first option. However, I would like to keep the final bundle size as small as humanly possible.


Which brings me to my question:


Are angular-material modules automatically tree-shaked?
In other words - when I import the huge angular.material.module.ts into my lazy loaded module - will the final bundle contain the angular-material modules that are not used in that respective module?


Should I stick to the second option, or is it OK to jam it all into the huge angular-material.module?

angular-material angular
1 Answers

No, its bad, dont do this.

Here is research on this topic: https://indepth.dev/stop-using-shared-material-module/

Basically if such magic would be possible, nobody will bother to split material library to tone of modules and in general everybody will make one giant module and hope compiler will understand what to do with this.

Maybe in future, with more Ivy-related things it will be possible, but now, it will maybe exlude some services and components or pure functions, maybe not.

And even if it will - its in general bad practice to write code, that logically should not be there.

user_15256800
Related