Question

我正在开发一个Angular 7应用程序，该应用程序除了加载问题外还可以正常工作。在研究中，我发现我应该使用AOT构建而不是JIT或常规构建，因为应用程序规模巨大，所以我无法进行AOT构建，它正在返回堆我们的内存问题。后来我删除了一些模块和组件以使AOT构建可行，但后来我意识到AOT构建文件的大小比普通构建大得多，这需要花费更多时间来加载，并且站点加载速度比以前更差，并且需要10到12加载秒数。

以下是我的angular.json文件代码

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": true,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": true,
    "buildOptimizer": false,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

及以下是构建文件大小的屏幕截图

当我使用ng build --prod --aot false

进行构建时

当我使用ng build --prod --aot

进行构建时

我不确定是什么问题，甚至不确定它是否仅能像这样工作，所有文章都建议通过AOT构建来减小尺寸，但增加我的尺寸。我没有正确的配置或缺少某些东西。

我想要做的就是减少网站加载时间，而无需使用通用功能。

任何帮助将不胜感激，谢谢

更新后，我怀疑我没有使用正确的模块/软件包，因此下面是我的package.json文件进行审核

"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "^7.2.3",
    "@angular/cdk": "^7.3.1",
    "@angular/common": "^7.2.4",
    "@angular/compiler": "^7.2.4",
    "@angular/core": "^7.2.4",
    "@angular/forms": "^7.2.4",
    "@angular/http": "^7.2.4",
    "@angular/material": "^7.3.1",
    "@angular/platform-browser": "^7.2.4",
    "@angular/platform-browser-dynamic": "^7.2.4",
    "@angular/router": "^7.2.4",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/router": "^4.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular2-text-mask": "^9.0.0",
    "angularx-social-login": "^1.2.6",
    "core-js": "^2.6.5",
    "crypto-js": "^3.1.9-1",
    "file-saver": "^1.3.4",
    "hammerjs": "^2.0.8",
    "magnific-popup": "^1.1.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.23",
    "mydatepicker": "^2.6.6",
    "ng2-ckeditor": "^1.2.2",
    "ng2-file-upload": "^1.3.0",
    "ng6-toastr": "6.0.0",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-slick": "^0.2.1",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.4.0",
    "tslib": "^1.9.0",
    "videogular2": "^6.4.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "^7.3.3",
    "@angular/compiler-cli": "^7.2.4",
    "@angular/language-service": "^7.2.4",
    "@types/core-js": "^0.9.45",
    "@types/jasmine": "^3.3.8",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^10.12.21",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.2",
    "rxjs-tslint": "^0.1.6",
    "ts-node": "^8.0.2",
    "tslint": "^5.12.1",
    "typescript": "3.2.4"
  }

Answer 1

如果应用程序规模很大，请使用此命令

node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --aot

AOT构建文件的大小大于正常构建

1 个答案: