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

Question

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 ]
})

Answer 1

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

Answer 2

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.

Answer 3

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