vendor.********.bundle.js size is too large in production

[AungMyoKyaw]

OS?

Mac OSX (Yosemite)

Versions.

1.0.0-beta.24

My App Repo

https://github.com/AungMyoKyaw/NightlifeCoordinationApp

ng build --prod --aot
vendor.**.bundle.js size is still too large.
angular-cli compress this file for production but it does not remove comment.
is there options for this ?
please

[grizzm0]

No there is currently no option to remove comments. This has been up for discussion but has to run through the legal team before being implemented.

I did a test where I removed comments from the *.js files. It only saved 1-2kb anyhow.

Edit: See #3270 (comment)

[deebloo]

124k gzipped is about right for the vendor bundle that includes Core, Router, Forms, and Http modules. If this issue is about the overall size of the Angular project I believe it is something the core team is working on.

[filipesilva]

Closed as answered.

[rxjs-space]

@deebloo , I got gzipped size similar to 124k for a fresh angular-cli generated app. But from angular.io aot section, they have a chart stating total bundle size 269k(not gzipped), while the fresh angular-cli gives 421k(not gzipped) for vendor.bundle with ng build --prod --aot --sm, as in this chart. Any idea why 50% more bigger?

[deebloo]

@rxjs-space have not read the article. does it include zone.js and polyfills with that bundle? also a freshly genrated cli app includes more then just core. Also that example is using rollup where the cli uses webpack. (and I believe the rollup treeshaking algo is better then webpack atm)

[rxjs-space]

@deebloo , no, zone.js and polyfills are not included in the smaller bundle. If we only compare the package '@angular/core', the difference is still significant, that is 57k vs 135k. You may find more details through the chart links in my last comment.

[deebloo]

Here is a screenshot of a hello world with no polyfills (other then zone.js and reflect), and only using angulars core module. It is much closer to 57k. I agree that size is a major factor and still an issue the angular team should address. removing zonejs from that bundle would get you another 13k or so

[deebloo]

@rxjs-space would be happy to share the app code for this hello world, but should move to a different platform since this issue is closed

[rxjs-space]

@deebloo , It's amazing that you get a vendor bundle at 313k(unzipped) or 71k(gzipped). I'd be grateful to have the app code. Please advise how you would like to share it.

[deebloo]

I'll share when I am back at a computer. This is just for hello world so as you add the router, http, etc it will grow

[deebloo]

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello World</h1>
  `
})
export class AppComponent { }

// polyfills.ts
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

[rxjs-space]

@deebloo , thanks for the code. With your code, I got similar result as yours -- vendor.bundle size 308k unzipped and 70k gzipped. That is quite good. Here's the breakdown. But with source-map-explorer, for @angular/core, the result is still 135k, where in angular doc's aot section, it is 57k. Maybe the size diff is caused by different bundle system, angular doc used rollup. I have not used rollup and will try it out soon.

[rxjs-space]

@deebloo, With John Papa's toh repo(which used rollup), I can have a build.js with @angular/core at 72k for a toh app (here's the detail), while angular-cli gives a 135k @angular/core for bare hello world. I think we may need to start a new issue for this.

[itsnotvalid]

I have noticed that a small app I built would get me 7xxk of main.bundle using beta 26 with AOT enabled. Seems quite huge to me.