Angular-cli: The production bundle for a simple app is too big

[mgol]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

macOS Sierra 10.12.1 (16B2555)

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.19-3
node: 7.0.0
os: darwin x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

I just invoked:

ng new test-app
cd test-app
ng build --prod

The log given by the failure.

Normally this include a stack trace and some more information.

There is no failure. However, the built file is quite large; the file main.***.bundle.js is 811 KB minified.

The simple Hello World-like app should take only about 40-50 KB, shouldn't it?

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[grizzm0]

Those numbers are from AOT + gz + tree shaking and some other stuff.

Not sure what a hello world app lands at these days. But use the --aot flag and check the .gz file instead of the .js. It should be a lot less than 811kb.

[deebloo]

like @grizzm0 said. aot + treeshaking would be between 80k and 100k (depending on which angular libs you are using)

[mgol]

@grizzm0 The following:

ng build --prod --aot

produces a 445 KB minified bundle (99.7 KB minified + gizpped). That's way closer to home (thanks for the --aot tip, I missed that as I was just following the README) but still twice as big as the hello world app mentioned at the ng-conf keynote:
https://youtu.be/gdlpE9vPQFs?t=566

@deebloo I've run these tests on the default app created just by ng new test-app without any additional parameters.

[mgol]

One thing I've noticed: the polyfills.ts file loads lots of ES6 polyfills in full from the core-js package. In my ES6 projects I usually used the transform-runtime Babel plugin which only loads these polyfill pieces that are used somewhere in the code; it reduces the total polyfill size contribution.

[clydin]

@mgol tree shaking should handle that scenario.

[mgol]

I see. What's causing this size difference from the previous attempts then?

[mgol]

@clydin I've thought about it and I'm actually not that convinced tree-shaking is enough here. The polyfills are by definition modifying global behavior so it's no obvious which of them may not be needed. This is why things like the Babel's transform-runtime exist and give way better results than just importing the whole core-js with Webpack's tree-shaking.

I'm back to wondering if this couldn't have been improved.

[clydin]

You're right, webpack's tree-shaking in general would probably have a limited benefit in that situation.
Yes; there is plenty that could be improved: Rollup has better tree-shaking ability, Closure in advanced mode has advantages over uglifyjs, etc. These (or something akin) will most likely be integrated as the system moves forward.
But personally, I think that outside of presentations and demos, super-optimizing the "hello world" scenario has limited utility overall. Real world applications won't benefit; they will be using multiple additional libraries and most likely leveraging a majority of es2015+'s capabilities. And with current browser improvements, the polyfills can be incrementally dropped moving forward.

[cavargas40]

Someone tried to make the small project in angular 2 but without the angular-cli?

i too think the project .js files are too heavy.

[grizzm0]

A clean install of angular-cli compiles to 96kb with --aot --prod.

Do you really think that's a lot with the internet speeds we have today? This file also includes an unique hash and can be cached for as long as you'd like making it a single download between versions.

[michael34]

@grizzm0 I agree when it comes to wired connections but on mobile 96kb is still quite big sometimes.

[grizzm0]

@michael34 google.com on mobile has a total footprint of 271kb where one of their JS files alone is 117kb. And that's basically for the top bar and a search box.

[mgol]

I guess my point was more about wondering how to achieve the advertised hello-world 50 KB gzipped size rather than complain that it's too big to be usable. It'd be weird if it suddenly doubled in size from last year to Angular 2.1.0 so there should be a way to achieve that but maybe CLI just doesn't use it. Especially that the team advertised they'll try to lower even this 50 KB.

[michael34]

@grizzm0 + tracking, I guess. But interesting none the less. Maybe they send out different versions depending on the mobile connection speed.

[Perezmarc]

Hi,
I'm running ng build --prod --aot and I get a 20MB app! assets are 6,7MB.

All files must be uploaded to my server? bundle.map files are very big

Thanks

[grizzm0]

@Perezmarc as of beta 22 there is a (working) --no-sourcemap which compiles without the .map files.

[Perezmarc]

Thanks!
now I'm in a more reasonable 9.8 MB bundle size.

[filipesilva]

I think this issue has mostly been answered.

There is still the fact that even with AoT and gzip CLI apps do not reach the mentioned 50kb, but I'm pretty sure that's due to tree shaking in webpack not working property (https://github.com/angular/angular-cli/issues/2901) so I'll track it there.

[clydin]

Polyfills were external to the 50kb prototype as well.

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

_{_This action has been performed automatically by a bot._}