Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does import of unnecessary modules in AppModule slow down the Angular 2 app?

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 ]
})
like image 291
Kooldandy Avatar asked Feb 20 '19 10:02

Kooldandy


People also ask

What should be imported BrowserModule or CommonModule?

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.

Can an Angular app have multiple modules?

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.

Which Angular module is needed for NGLF ngFor?

BrowserModule and CommonModule link BrowserModule imports CommonModule , which contributes many common directives such as ngIf and ngFor .

What is the use of AppModule in Angular?

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.


3 Answers

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

like image 73
JustLearning Avatar answered Oct 14 '22 05:10

JustLearning


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.

like image 32
yomateo Avatar answered Oct 14 '22 06:10

yomateo


Importing unnecessarily module bloats your application size significantly. It also applies to any angular module you might want to use, including third-party ones.

like image 41
Ofir Lana Avatar answered Oct 14 '22 04:10

Ofir Lana