角度提高页面速度

Question

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

ng build --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，而不是在您的应用启动时。您应该创建不同的模块并在需要时延迟加载它们。这样，您的应用程序只会在启动时加载一部分，然后在需要时加载其余部分，这将为您节省一些时间，请查看有关如何设置的 Angular 文档：https://angular.io/guide/lazy-loading-ngmodules