Angular 应用程序性能提升

如何解决Angular 应用程序性能提升

我有一个 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) {
    }
}

解决方法

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

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

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

您可以编辑 angular.json 并检查是否打开/关闭了某些选项以缩短构建时间。从下面的代码中可以看出，默认构建选项是优化：false、aot：true、buildOptimizer：false。所有这些选项都会缩短构建时间，您可以在特定构建的配置中覆盖这些选项。