Filesize seems excessive ng2

[brgaulin]

When doing a clean build of the ng2 redux repo, the filesize is 1.5MB, was wondering if that was expected? I'm trying to dig down to why webpack has it built so large, it claims angular is 5MB before it gets minified.

I may end up going with a more baremetal angular2 setup since I'm trying for a mobile app, but was wondering what the thoughts were from the rangle team =)

Result from npm run build

Version: webpack 1.12.14
Time: 16279ms
                                Asset       Size  Chunks             Chunk Names
          app.edeb89bd59da77c3d657.js     218 kB       0  [emitted]  app
        shims.edeb89bd59da77c3d657.js      22 kB       1  [emitted]  shims
vendor.edeb89bd59da77c3d657.bundle.js    1.28 MB       2  [emitted]  vendor
      app.edeb89bd59da77c3d657.js.map    1.24 MB       0  [emitted]  app
    shims.edeb89bd59da77c3d657.js.map     127 kB       1  [emitted]  shims
   vendor.edeb89bd59da77c3d657.js.map    13.1 MB       2  [emitted]  vendor
                           index.html  536 bytes          [emitted]
   [0] ./shims/shims_for_IE.js 1.14 kB {1} [built]
   [0] multi vendor 196 bytes {2} [built]
    + 373 hidden modules
Child html-webpack-plugin for "index.html":
        + 1 hidden modules

[SethDavenport]

Hi @brgaulin, thanks for your note.

The vendor.js size does seem a little large. We may be able to tweak webpack to bring it down a bit. webpack -p (which applies default UglifyJS settings) brings vendor.js down to 763 kB but breaks Angular2...

So currently we're using

new webpack.optimize.UglifyJsPlugin({
    mangle: false,
    compress: {
      warnings: false
    }
  })

[SethDavenport]

See also https://github.com/angular/angular/issues/6380

[brgaulin]

@SethDavenport Good catch on that angular issue, I guess it is still beta ;) But I used a few other methods of getting angular down with webpack, and it seems that the lowest I could get it was about 800kb, which is still just huge for vendor files lol, but that seems to be the standard size. I'm just trying to picture a phone execute that much JS without melting lol

[SethDavenport]

@brgaulin I'd be interested in those methods if you're willing to share them :)

[brgaulin]

I think it was

beautify: false
mangle: false
compress: {
        screw_ie8: true
},
comments: false

[SethDavenport]

Thanks @brgaulin - what ended up working the best for me was

const prodPlugins = [
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin({
    mangle: {
       keep_fnames: true
    },
    compress: {
      warnings: false
    }
  })
];

(thanks to @gdi2290 for his comment here: https://github.com/angular/angular/issues/6501#issuecomment-204153859).

This, plus rejigging a couple of things in the vendor section gets it down to:

Hash: 72373d9bb9635c0be9c1
Version: webpack 1.12.14
Time: 18352ms
                                Asset       Size  Chunks             Chunk Names
vendor.72373d9bb9635c0be9c1.bundle.js     679 kB       0  [emitted]  vendor
          app.72373d9bb9635c0be9c1.js     245 kB       1  [emitted]  app
        shims.72373d9bb9635c0be9c1.js     100 kB       2  [emitted]  shims
   vendor.72373d9bb9635c0be9c1.js.map      11 MB       0  [emitted]  vendor
      app.72373d9bb9635c0be9c1.js.map    2.33 MB       1  [emitted]  app
    shims.72373d9bb9635c0be9c1.js.map     764 kB       2  [emitted]  shims
                           index.html  536 bytes          [emitted]

Vendor.js is pretty much just Angular2 stuff at this point and is 679 KB. Interestingly my node_modules/angular2/bundles/angular2.min.js clocks in at 589 KB.

So Angular2 seems to consume the lion's share, and it looks like we can shave off another 90 kB max.

I can look to drop some other libs from the app, but the other stuff I think is mostly redux/immutable and friends.

My colleague @sumitarora is working on a more minimal angular starter (no redux) so we can see where that lands.

[brgaulin]

Ya, My main concern is, even though we can keep minifying, all that JS is still there executing in the browser lol. I think I'll wait for angular2 to hopefully clean this up before release? I know the team has been pushing mobile pretty hard, but when you have unmangled code that is ~1MB, that is just too much lol

Switching to another setup for this project, and crossing my fingers that the next project angular2 will be ready =)

Thanks for the help @SethDavenport !

[SethDavenport]

np - the hazards of Beta I guess. Might not work for you, but our Angular1 starter is set up with typescript and some sugar to make it use a similar component model to ng2. Its size is a lot smaller:

Version: webpack 1.12.14
Time: 16876ms
                             Asset       Size  Chunks             Chunk Names
    vendor.6e3b0d2ee75a0d4e92c9.js     323 kB       0  [emitted]  vendor
       app.6e3b0d2ee75a0d4e92c9.js    91.9 kB       1  [emitted]  app
vendor.6e3b0d2ee75a0d4e92c9.js.map    3.92 MB       0  [emitted]  vendor
   app.6e3b0d2ee75a0d4e92c9.js.map     824 kB       1  [emitted]  app
                        index.html  497 bytes          [emitted]

https://github.com/rangle/angular-redux-starter

[brgaulin]

The claims I have been seeing, is that angular2 is focusing on being lighterweight on mobile, which I hope involves filesize being the same or smaller =P

I will probably end up falling back to angular1 for now. But ya, in this case, beta really means beta =P I can't wait for that stuff to launch though. Looks good.

And thanks @SethDavenport and rangle for your awesome youtube tutorials/overviews/coverage on Angular2. They are awesome!