Angular-cli: 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 https://github.com/angular/angular-cli/issues/3270#issuecomment-262840303

[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.

[orgertot]

@itsnotvalid : same issue..
Its basically a new project created with the cli. I imported just the angular-jwt. But this would not explain the 500kb more.

The question is: I have many entries in my polyfills.ts. Do I need that many and do they have that high impact on the size?

My discoveries:

1. Removing blanks and line breaks and comments in the vendor..bundle.js will save *~40kb (729922 bytes to 687178 bytes) with --prod and --aot
2. I removed some polyfill.js entries which saved me like ~32kb (729922 bytes to 698000 bytes)
   ```ts import 'core-js/es6/symbol';
   import 'core-js/es6/object';
   import 'core-js/es6/function';
   //import 'core-js/es6/parse-int';
   //import 'core-js/es6/parse-float';
   //import 'core-js/es6/number';
   //import 'core-js/es6/math';
   import 'core-js/es6/string';
   //import 'core-js/es6/date';
   //import 'core-js/es6/array';
   //import 'core-js/es6/regexp';
   import 'core-js/es6/map';
   //import 'core-js/es6/set';
   import 'core-js/es6/reflect';

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

I probably can remove some more because I think Im just using the string, function, object and map.
Edit: I removed everything but `import 'core-js/es7/reflect'; import 'zone.js/dist/zone';` saved me additional **9KB**. I expected more tbh..
3. I removed ReactiveFormsModule, because I was not using it anyway. Saved me **0kb** somehow?

My actual app.component.ts
```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Http, HttpModule, RequestOptions } from '@angular/http';
import { AuthHttp, AuthConfig } from 'angular2-jwt';

import { AppComponent } from './app.component';

import {Config} from "./config";

import { LoginComponent } from "./unprotected/login.component";
import { ProtectedComponent } from "./protected/protected.component";

import { routing } from "./app.routing";


import { Auth } from "./auth.service";
import { AuthGuard } from "./auth-guard.service";

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig({
          tokenName: 'id_token',
          tokenGetter: (() => localStorage.getItem('id_token')),
          globalHeaders: [{'Content-Type':'application/json'}],
     }), http, options);
}


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ProtectedComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    routing,
  ],

  providers: [
    Config,
    Auth,
    AuthGuard,
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [Http, RequestOptions],
    },
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

I have no Idea what to remove next. It seems 639KB is my minimum somehow?

Edit: Im talking about not compress files. The compressed would have a size of 144KB.

[SquadraCorse]

@orgertot what is your main.js size running ng serve?

[noyancur]

are there any solution with new updates without --prod? It gives me 3.50MB vendor.bundle.js, it is still so big

[reco]

i agree this is a disaster ;(

[grizzm0]

Why do you need a small bundle without --prod? The reason the dev bundle is large is mainly because of sourcemaps which can be disabled with --no-sourcemap. Then there's alot of minifying etc that doesn't get executed in a dev build aswell.

[George35mk]

my vendor.bundle.js is 16.3 MB What i should Do ??

[maapteh]

angular 5 and their cli create much smaller files, although in my case it took more time to build but the size was really small (even no vendor created anymore).

[pacurtin]

Try this out:

ng build -prod -aot --buildOptimizer

[arunprasathv]

@pacurtin @maapteh @hansl @deebloo
My vendor bundle.js is 3.45 MB. How can i reduce it to keep under 2 MB.

I've used - ng build -prod -aot --buildOptimizer

👍 1

[George35mk]

1: Don't use unnecessary imports
2: Keep track the size of the modules,
3: ng build -prod -aot --buildOptimizer like the @pacurtin say ^^
4: I am not sure about the comments but inline SVG can increase the size

[clydin]

Just a quick note: ng build --prod is equivalent to ng build --prod --aot --buildOptimizer
Also, ng build --prod does not generate a vendor bundle by default.

[dssagar93]

Any luck in 2018 guys ? I am getting vector bundle of 3MB even after ng build --prod --aot --buildOptimizer (seems to be similar to ng build --prod). My site is too slow !

[pacurtin]

@dssagar93 If your site is slow in production try something like https://www.webpagetest.org/ and make sure your server has gzip enabled.

With gzip enabled my main.js went from 5.5mb to 1.4mb

I'm also going to try splitting my app into sub modules as detailed here: https://malcoded.com/posts/angular-fundamentals-modules

That way users will lazy-load some parts of my app and won't have such a big download when all they really need to see at first is a login page or a home page.

[dssagar93]

I have GZIP already enabled. I don't know what is causing the issue. When I check the network tab in Chrome dev tools there is a long idle time of around 8 seconds while loading the site. I dont understand what that idle time is for !

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>