angular - AOT 构建文件大小大于正常构建

标签 angular angular7 angular-aot

我正在开发一个 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 构建时

aot false build

当我使用 ng build --prod --aot 构建时

aot true build

我不确定是什么问题,甚至不确定它是否只能像这样工作,所有文章都建议 aot build 减少大小,但我的增加了。要么我没有正确的配置,要么缺少某些东西。

我只想在不使用 universal 的情况下减少网站加载时间。

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

更新了,我怀疑我没有使用正确的模块/包所以下面是我的 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"
  }

最佳答案

如果你有一个巨大的应用程序大小使用这个命令

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

关于angular - AOT 构建文件大小大于正常构建,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56556493/

相关文章:

angular - 根据先前操作的结果有条件地调度操作

angular - 如何使用 Ngfor 默认打开 Nebular Accordion

angular - 推送到 FormArray 不会更新 mat-table

angular - typescript : error TS2740: Type '{}' is missing the following properties from type 'Product[]' : length, 弹出、推送、连接等 26 个

html - 分页在 Angular 7 中不起作用。(我使用 Angular Material )

javascript - 为什么 Angular AoT 不支持装饰器中的函数表达式?

angular - 由于 'Can' t构造了属性..的查询,因此导致 Angular AOT编译失败。

angular - 仅获取 10 个值而不是全部 - Rxjs

angular - 如何从 Angular 7 中的 API 响应创建动态表单?