角度增加页面速度

Question

我正在使用angular创建项目。在gtmatrix中测试页面速度时遇到问题。 下面是生成构建的命令：

ng构建--prod--aot

文件大小为1.9mb ... Bu gt矩阵表示由于该文件，速度较低...

这里是包装物

"dependencies": {
    "@angular/animations": "~10.0.2",
    "@angular/cdk": "^10.0.1",
    "@angular/common": "~10.0.2",
    "@angular/compiler": "~10.0.2",
    "@angular/core": "~10.0.2",
    "@angular/forms": "~10.0.2",
    "@angular/material": "^10.0.1",
    "@angular/platform-browser": "~10.0.2",
    "@angular/platform-browser-dynamic": "~10.0.2",
    "@angular/router": "~10.0.2",
    "@kolkov/angular-editor": "^1.1.2",
    "angular2-cookie": "^1.2.6",
    "angularx-social-login": "^3.2.0",
    "jquery": "^3.5.1",
    "moment": "^2.27.0",
    "ng-pick-datetime": "^7.0.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-bootstrap": "^5.6.1",
    "ngx-cookie-service": "^3.0.4",
    "ngx-page-scroll": "^7.0.1",
    "ngx-page-scroll-core": "^7.0.1",
    "ngx-pagination": "^5.0.0",
    "ngx-toastr": "^12.1.0",
    "ngx-ui-loader": "^9.1.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },

Answer 1

您应该考虑延迟加载，这意味着仅在需要时才加载所需的组件，图像，CSS，js，而不是在应用程序启动时加载。您应该创建不同的模块，并在需要时延迟加载它们。这样，您的应用程序只有一部分会在启动时加载，然后在需要时加载其余部分，这将节省您一些时间，请查看有关如何进行设置的角度文档：https://angular.io/guide/lazy-loading-ngmodules