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 并检查是否有一些选项打开/关闭以获得更好的构建时间。从下面的代码中可以看出,默认的构建选项有 optimization: false、aot: true、buildOptimizer: false。所有这些选项将导致更快的构建时间,您可以在特定构建的配置中覆盖这些时间。
推荐阅读
- java - 如何使用 Advice Controller 自动验证对 SpringBoot 应用程序的 API 请求
- python - 这是将迭代器添加到类的正确方法吗?
- r - 获取列的最大值和名称,并在 R 中调整其他列
- javascript - Selenium Google 弹出式广告 iframe
- python - 为什么是 Python 错误?
- flutter - Dart 中的地图可以包含函数吗?
- python - Python - 请求未使用请求和 json 授权
- html - iPhone主屏幕上的自定义书签
- python - 如何将 python 源代码添加到 libreoffice writer?
- android - React Native - 在焦点上更改按钮颜色