Angular 应用程序性能改进

Question

我有一个 angular 应用程序，其中所有内容都编码在一个 app.module.ts 中，这里我们是所有组件，应用程序加载时间非常慢。所以我的问题是我们如何才能改善应用程序的加载时间。为此，我尝试从 app.module.ts 文件的声明数组中删除一些组件，我可以明显看到加载时间增加了。但是我的应用程序需要所有组件。那么如何将所有组件保留在声明数组中并缩短应用程序的加载时间。这可能吗？或者有任何替代解决方案可以实现这一目标？

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

Answer 1

您可以做的第一件事是为了提高可读性，您可以将所有 angular material 内容导入和导出到单独的模块中。假设您创建了 material.module.ts，您只会将它们导出到您需要它们的应用程序模块或特定模块（angular tree shaking 将知道您需要哪个模块）：

您可以实现延迟加载。仔细观察应用程序的初始加载，找到初始加载需要什么以及其他不需要的可以将其添加到单独的模块 - >组件等。然后通过路由使用延迟加载。

另一件事，如果您使用 Angular 12，您会看到更好的命名约定和更有意义的块数据名称。

您可以编辑 angular.json 并检查是否有一些选项已打开 on/off 以获得更好的构建时间。从下面的代码中可以看出，默认构建选项是 optimization: false、aot: true、buildOptimizer: false。所有这些选项都会导致更快的构建时间，您可以在特定构建的配置中覆盖它。

Angular 应用程序性能改进

Angular application performance improvement

lazy-loading

typescript

angular-module

angular