angularangular7filesizevendorpage-load-time

Angular 7: How can I reduce the vendorjs (@angular/... packages) size to improve page load time?

So, I have searched for this here, and tried most of the solutions. But, I didn't get any concrete ones. The problem is the vendorjs size is around 1 MB, if I consider only the Angular (core?) packages, and this file gets loaded before anything is displayed on screen. Which means, we have to wait for 1 Mb+ files to be served from server, before the user (the king) can do anything useful in the app.
I don't know if I'm doing something wrong. If I can't reduce the size, is there any other workaround? I don't care about the size, as long as the app loads quickly, and (sideload?) these core packages. The actual size is much more, but I want to focus on the Angular packages.

Please don't give any solutions related to gzip, because (I could be wrong here), this needs to be setup in the server? and I don't have control over the server configurations.

I used source-map-explorer to come up with the sizes: vendorjs-size-distribution

EDIT: BTW this is from the package json:
"@agm/core": "1.0.0-beta.5",
"@angular/animations": "7.0.3",
"@angular/cdk": "7.0.3",
"@angular/common": "7.0.3",
"@angular/compiler": "7.0.3",
"@angular/core": "7.0.3",
"@angular/elements": "^7.2.0",
"@angular/flex-layout": "7.0.0-beta.19",
"@angular/forms": "7.0.3",
"@angular/http": "7.0.3",
"@angular/material": "7.0.3",
"@angular/platform-browser": "7.0.3",
"@angular/platform-browser-dynamic": "7.0.3",
"@angular/router": "7.0.3",

Solution

  • So, I have upgraded to Angular 11. So, I don't know about the internals. But I did not notice much improvements (that's subjective). But, my belief is Angular core packages in itself has 500kb size. And this gets loaded before any page paint. I will post webpack-analyzer results when I get the time. So, as far as I know, there is no way around this :)

    P.S. This hasn't effected our project much as it is internal app, and network is good enough most of the time.

    Edit: Had some issues with source-map-explorer so ended up

    using webpack-bundle-analyzer to get bundle sizes: @angular bundle size core.js size

    @angular:991.56kb