In angular(2/4/6) application if we import unnecessary modules in app module will that slow down the application.
Does it impact on the performance of the application ?
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'myId' }),
FormsModule,
AppRoutingModule,
HttpClientModule,
HttpClientInMemoryWebApiModule,
AaModule,
BbModule
],
declarations: [
AppComponent,
AdminComponent
],
providers: [ ],
bootstrap: [ AppComponent ]
})
Should I import BrowserModule or CommonModule ? link. The root application module, AppModule , of almost every browser application should import BrowserModule from @angular/platform-browser . BrowserModule provides services that are essential to launch and run a browser application.
So now, you need to follow some simple steps to use multiple modules in an Angular application. Create a simple application using Angular CLI. If you are going to use Angular for the first time, click here. I am going to create an application which contains three modules: App, Employee, Admin, Home.
BrowserModule and CommonModule link BrowserModule imports CommonModule , which contributes many common directives such as ngIf and ngFor .
Tell Angular how to construct and bootstrap the app in the root "AppModule". An Angular module class describes how the application parts fit together. Every application has at least one Angular module, the root module that you bootstrap to launch the application.
Yomateo is correct to say that tree shaking will take care of unused modules/module operators when build is performed.
A tree shaker walks the dependency graph, top to bottom, and shakes out unused code like dead leaves in a tree
There is however a difference in the amount of time it takes to perform the build, as it takes longer to build apps with more modules included even though they are never used and the build size is larger if more modules are imported.
So to answer your question the performance will not be affected, however, build time and build size will be affected.
Source
If you import a module and never use it.. it will be left behind. This is one of the biggest advantages of "trees shaking" that the compiler provides. Also known as "dead code".
Referencing unnecessary code from modules on the other hand will increase (or bloat as you call it) your distribution size and will also require that the browser reads this code into memory.
Importing unnecessarily module bloats your application size significantly. It also applies to any angular module you might want to use, including third-party ones.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With