angular - angular-如何减少 Angular 应用程序的 DOMContentLoaded 时间
问题描述
我正在练习角度并创建了一个应用程序,我只添加了 3 个组件。我的应用程序需要 26 秒才能加载,所以为了减少这个时间,我在我的应用程序中使用了延迟加载概念,但这仍然无法正常工作。实现延迟加载概念后,我仍然有 26 秒的时间来加载我的应用程序。
注意:我正在 3g 网络上测试我的应用程序。
应用程序路由.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { MatTableModule } from '@angular/material/table'
import { FormsModule } from '@angular/forms';
import { MaterialModule } from './material/material.module';
import { MatFormFieldModule } from '@angular/material/form-field';
const routes:Routes=[
{path:"pipes",
loadChildren: () => import('src/app/pipe-module/pipe-mod.module').then(m => m.PipeModModule)},
{path:"products",
loadChildren: () => import('src/app/product-module/product-mod.module').then(m => m.ProductModModule)},
{path:"users",
loadChildren: () => import('src/app/user-module/user-mod.module').then(m => m.UserModModule)},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
]
@NgModule({
imports: [RouterModule.forRoot(routes),
MatFormFieldModule
],
exports: [RouterModule]
})
export class AppRoutingModule { }
包.json:
{
"name": "first-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^10.1.1",
"@angular/cdk": "^10.2.1",
"@angular/common": "~10.1.0",
"@angular/compiler": "~10.1.0",
"@angular/core": "~10.1.0",
"@angular/forms": "~10.1.0",
"@angular/material": "^10.2.1",AA
"@angular/platform-browser": "~10.1.0",
"@angular/platform-browser-dynamic": "~10.1.0",
"@angular/router": "~10.1.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1001.0",
"@angular/cli": "~10.1.0",
"@angular/compiler-cli": "~10.1.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
一切正常,但我想尽可能减少我的应用程序的 DOMContentLoaded 时间
解决方案
推荐阅读
- html - 我的 django 标签不适用,它显示在网站页面上
- postgresql - 无法在 Mac 上使用 run.sh 运行 Go 项目,而 PostgreSQL 在 Docker 上运行
- angular - 使用角度7单击添加按钮时如何在表格中添加一行
- java - 通过 @Configuration 在自己的类上返回 @Bean
- c# - .net 核心 API 文件上传在 Azure 上不起作用
- sql - UPDATE / DELETE 是每行还是整个原子?
- python - 想以排序方式查看字典的合并
- php - 锚链接无法在电子邮件中正确显示
- java - 在 Spring Security 中禁用用户时如何向客户端显示用户禁用消息
- javascript - 如何将 Base64 图像旋转 90 度而不损失图像质量?