Search code examples
angulartypescriptlazy-loadingangular-module

Angular application performance improvement

I have an angular application in which everything is coded in a single app.module.ts and here we are all the components for this the application loading time is very slow. So my question is how can we improve the load time of our application. For this I have tried removing some components frm the declarations array from app.module.ts file and I can significantly see the load time increased. But my application needs all the components. So how can I keep all the components inside declarations array and improve the load time of application. Is this possible? or any alternate solution is there to achieve this?

app.module.ts

//All imports go here...

@NgModule({
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    imports: [
        SatPopoverModule,
        RouterModule.forRoot([]), 
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        // NoopAnimationsModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        AppRoutingModule,
        HttpClientModule,
        AceEditorModule,
        // Ng2OdometerModule,
        // ChartsModule,
        // Ng2SearchPipeModule,
        NgxShimmerLoadingModule,
        // Sub modules
        LayoutModule,
        // SharedModule
    ],
    declarations: [
        AppComponent,
        // Layout
        LayoutComponent,
        PreloaderDirective,
        // Header
        AppHeaderComponent,
        // Footer
        AppFooterComponent,
        DashboardComponent,
        // MsspDashboardComponent,
        // // Pages
        // JobslistComponent,
        // JobDetailsComponent,
        ProjectsListComponent,
        // RegionsListComponent,
        // RunListComponent,
        // ProjectsNewComponent,
        // // ProjectsEditComponent,
        // MessageListComponent,
        // ActivityListComponent,
        // MessageDetailComponent,
        // RunDetailComponent,
        // // IssuesListComponent,
        // // IssuesNewComponent,
        // // IssuesEditComponent,
        // MarketplaceListComponent,
        // MarketplaceNewComponent,
        // MarketplaceEditComponent,
        // // VaultListComponent,
        // // VaultNewComponent,
        // // VaultEditComponent,
        // OrgListComponent,
        // OrgListRowEditComponent,
        // OrgNewComponent,
        // OrgEditComponent,
        // UserListComponent,
        // UserNewComponent,
        // UserNewBulkComponent,
        // UserEditComponent,
        // // UserProfileComponent,
        // OrgUsersComponent,
        // AccountListComponent,
        // AccountEditComponent,
        // AccountNewComponent,
        // RegionNewComponent,
        // RegionEditComponent,
        // NotificationListComponent,
        // // NotificationEditComponent,
        // // NotificationNewComponent,
        // MsgDialogComponent,
        // ErrorDialogComponent,
        // ResponseDialogComponent,
        // PasswordResetComponent,
        // AdvRunComponent,
        // IssueTrackerRegisterComponent,
        // MstoDurationPipe,
        // ByteFormatPipe,
        // RunHistoryComponent,
        // SuperbotnetworkListComponent,
        // // DeleteDialogComponent,
        // SuitDailogComponent,
        // // ProjectsSyncComponent,
        // JobsNewComponent,
        // JobsEditComponent,
        // ProjectsManageComponent,
        // RegisterComponent,
        // EnvironmentNewComponent,
        // EnvironmentListComponent,
        // EnvironmentEditComponent,
        // TestSuiteListComponent,
        TimeAgoPipe,
        // AutoSyncComponent,
        // SlackRegisterComponent,
        // // ApiCoverageComponent,
        // BotCredentialsComponent,
        // BotDialogComponent,
        // //  TestsuiteRunComponent,
        // ProjectsConfigComponent,
        // BotSavingDialogComponent,
        // MavenIntegrationComponent,
        // GradleIntegrationComponent,
        // JenkinsIntegrationComponent,
        // TestsuitEditDialogComponent,
        // // AutoSyncSaveConfigComponent,
        // TestsuitNewDialogComponent,
        // JobAnalyticsComponent,
        // ProjectRecommendationsComponent,
        // MarketplaceDetailsComponent,
        // BambooDialogComponent,
        // TeamcityDialogComponent,
        // HudsonDialogComponent,
        // ManageRolesComponent,
        // // ProjectRatingsComponent,
        // ManageSkippathDialogComponent,
        // ManageAutocodeGenAuthComponent,
        // OrgUserNewComponent,
        // OrgUserListComponent,
        // OrgUserEditComponent,
        // OrgUserPwdResetComponent,
        // ManageAbacDialogComponent,
        // // HowToFixDialogComponent,
        // // RatingAssesmentComponent,
        // ManageE2eDialogComponent,
        // ManageAbacType3DialogComponent,
        // ManageAbacType2DialogComponent,
        // UserAddComponent,
        // ManageAbacL1PositiveComponent,
        // ManageAbacL2PositiveComponent,
        // ResourcesComponent,
        // SystemSettingsComponent,
        // ManageAbacL6DialogComponent,
        // OasRawfileComponent,
        // VulnerabilityDashboardComponent,
        // ManageAbacL7DialogComponent,
        // UserVariableListComponent,
        // ArchitectureViewComponent,
        // UserVariableNewComponent,
        // UserVariableEditComponent,
        // RecommendationsLogsComponent,
        // AwsCodePipelineIntegrationComponent,
        // GitlabIntegrationComponent,
        // TfsIntegrationComponent,
        // ManageDdosComponent,
        // NestedResourceComponent,
        // RecommendationsCommentsComponent,
        // MyProfileComponent,
        // ManageHijack1Component,
        // ManageAbacType2ResponseDialogComponent,
        // RecommendationsIssuesComponent,
        // XssFilterDialogComponent,
        // OasDiffDialogComponent,
        // ReportingComponent,
        // // JobsSlackDialogComponent,
        // JobsAutovulDialogComponent,
        // // VulDetailsDialogComponent,
        // RewardsComponent,
        // VulnerabilityDetailsComponent,
        // DialogEntryComponent,
        // SecurityCoverageComponent,
        // PlaybookSampleDialogComponent,
        // BotStatusDialogComponent,
        // GitRepoComponent,
        // PermissionsComponent,
        // CustomGeneratorListComponent,
        // CustomGeneratorNewComponent,
        // CustomGeneratorEditComponent,
        // BackButtonDirective,
        // AssessmentReportComponent,
        // TodoDialogComponent,
        // //  PersonalizedCoverageDialogComponent,
        // CustomGeneratorCompliance1NewComponent,
        // CustomGeneratorCompliance1EditComponent,
        // CustomGeneratorCompliance2NewComponent,
        // CustomGeneratorCompliance2EditComponent,
        // AssertionsListDialogComponent,
        // ArchivedCategoriesDialogComponent,
        // VariableNewBulkComponent,
        // CustomGeneratorBasicNewComponent,
        // CustomGeneratorBasicEditComponent,
        ShortNumberPipe,
        // ApiGatewayComponent,
        // ApigatewayDialogCredsComponent,
        // IssueTrackerPageRegistrationComponent,
        // CiCdIntegrationComponent,
        // AccountPageComponent,
        // ScannerDeleteDialogComponent,
        // PayloadsComponent,
        // ActivityDialog,
        // NotabugCommentsComponent,
        // OrgUserNewBulkComponent,
        // CustomGeneratorStoredEditComponent,
        // CustomGeneratorStoredNewComponent,
        // CircleCicdIntegrationComponent,
        // MsAzureIntegrationComponent,
        // CustomGeneratorCustomHeaderNewComponent,
        // CustomGeneratorCustomHeaderEditComponent,
        // SelectEndpointsDialogComponent,
        // AgreementDialogComponent,
        // CloudApiGatewayComponent,
        SigninComponent,
        // CustomScrollDirective,
        // ErrorComponent,
        // DateDiffPipe,
        // QrCodeDialogComponent,
        // ProjectNew2Component,
        // AwsS3bucketComponent,
        // AwsS3Component,
        // AuthTestResponseDialogComponent,
        // SignupComponent,
        // UpgradeComponent,
        // CustomSnackbarComponent,
        // OrginalFileComponent,
    ],
    bootstrap: [AppComponent],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
        DashboardService,
        TestSuiteService,
        AccountService,
        Handler,
        DatePipe,
        AutocodeGeneratorService,
        UserVariableService
    ]
})
export class AppModule {
    constructor(public appRef: ApplicationRef) {
    }
}
Solution
    1. First thing that you can do is for sake of readability you can import and export all of angular material stuff into separate module. Lets say you create material.module.ts where you will only export them to the application module or particular module that you need them (angular tree shaking will know which module you need):

    enter image description here

    1. You can implement lazy loading. Carefully observe the initial load of the application and find what do you need for initial load and everything else that you dont need you can add it to separate module -> components etc. Then just use lazy load through route. enter image description here

    Another thing, if you are using Angular 12, you will see better naming convention and more meaningful names for the chunk data. enter image description here

    1. You can edit angular.json and check if there are some options turned on/off for better build time. As you can see from the code below default build options are optimization: false, aot: true, buildOptimizer: false. All of those options will cause faster build time which you can override in configurations for particular build.

    enter image description here enter image description here