I am working on a angular 7 app which works fine except loading issues, on research I found that I should be using AOT build instead of JIT or normal build, I was not able to make aot build because of huge application size, it was returning heap our of memory issue. Later I removed some modules and components to make AOT build possible which worked but then I realized that AOT build file size is much larger than normal build which take more time to load and site load speed is worse than before now and it take 10-12 seconds to load.
Following is my angular.json file code
"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"
}
]
}
}
and following are screenshot of file sizes for builds
When I build with ng build --prod --aot false
When I build with ng build --prod --aot
I am not sure what is the issue and even not sure if it works like this only, all articles suggests for aot build to reduce size but mine increases. Either I dont have proper configuration or missing something.
All I want to is reduce site load time without using universal.
Any help will be appreciated, thanks
Updated, I doubt that I have not used proper modules/packages so following is my package.json file to review
"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"
}
