【发布时间】：2019-10-26 15:08:42
【问题描述】：
我正在开发一个 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 build 来减小大小，但我的会增加。要么我没有正确的配置，要么遗漏了一些东西。
我只想在不使用通用的情况下减少网站加载时间。
任何帮助将不胜感激，谢谢
已更新，我怀疑我没有使用正确的模块/包，所以以下是我要查看的 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"
}
【问题讨论】：
-
--prod 标志默认启用 aot。试试
ng build --prod --build-optimizer -
Angular 的行为很不寻常，建议你在 GitHub 的 Angular 社区中打开一个 issue。此外，如果您将应用程序迁移到 v8，您可以使用 IVY 编译器来减少构建结果的大小。
-
@AvinKavish 我也试过了，但结果和文件大小几乎与第二个屏幕截图中显示的一样
-
我很好奇哪些文章告诉您 AoT 构建会生成更小的文件？我不是专家，但我知道 AoT（Ahead-of-Time）编译主要用于生成代表您的组件运行的代码。它允许 Angular 在执行变更检测时使用 O(1) 而不是 O(n) 的查找效率。因此，您可以用更多代码换取更快的应用程序。
-
假设首页在main，你的初始下载是main+vendor+common+polyfills+styles = 580+24+42+1077+307=~2MB。当您在服务器上启用 GZIP 压缩时，它应该会下降到大约 1MB。 如果 1MB 需要 10 秒，这听起来像是一个互联网问题。您将不得不使用 Universeral 或其他东西来解决它。但是对于 AOT，它似乎正在工作，供应商捆绑包从 1.5Mb 下降到 1Mb，其他模块很可能由于延迟加载模块之间的错误导入配置而上升。一方面，我没有看到在惰性模块之间共享组件的共享模块。
标签： angular angular7 angular-aot