How to decrease prod bundle size?

Update February 2020

Since this answer got a lot of traction, I thought it would be best to update it with newer Angular optimizations:

1. As another answerer said, ng build --prod --build-optimizer is a good option for people using less than Angular v5. For newer versions, this is done by default with ng build --prod
2. Another option is to use module chunking/lazy loading to better split your application into smaller chunks
3. Ivy rendering engine comes by default in Angular 9, it offers better bundle sizes
4. Make sure your 3rd party deps are tree shakeable. If you're not using Rxjs v6 yet, you should be.
5. If all else fails, use a tool like webpack-bundle-analyzer to see what is causing bloat in your modules
6. Check if you files are gzipped

Some claims that using AOT compilation can reduce the vendor bundle size to 250kb. However, in BlackHoleGalaxy's example, he uses AOT compilation and is still left with a vendor bundle size of 2.75MB with ng build --prod --aot, 10x larger than the supposed 250kb. This is not out of the norm for angular2 applications, even if you are using v4.0. 2.75MB is still too large for anyone who really cares about performance, especially on a mobile device.

There are a few things you can do to help the performance of your application:

1) AOT & Tree Shaking (angular-cli does this out of the box). With Angular 9 AOT is by default on prod and dev environment.

2) Using Angular Universal A.K.A. server-side rendering (not in cli)

3) Web Workers (again, not in cli, but a very requested feature)
see: https://github.com/angular/angular-cli/issues/2305

4) Service Workers
see: https://github.com/angular/angular-cli/issues/4006

You may not need all of these in a single application, but these are some of the options that are currently present for optimizing Angular performance. I believe/hope Google is aware of the out of the box shortcomings in terms of performance and plans to improve this in the future.

Here is a reference that talks more in depth about some of the concepts i mentioned above:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

Use latest angular cli version and use command ng build --prod --build-optimizer It will definitely reduce the build size for prod env.

This is what the build optimizer does under the hood:

The build optimizer has two main jobs. First, we are able to mark parts of your application as pure,this improves the tree shaking provided by the existing tools, removing additional parts of your application that aren’t needed.

The second thing the build optimizer does is to remove Angular decorators from your application’s runtime code. Decorators are used by the compiler, and aren’t needed at runtime and can be removed. Each of these jobs decrease the size of your JavaScript bundles, and increase the boot speed of your application for your users.

Note : One update for Angular 5 and up, the ng build --prod automatically take care of above process :)

Lodash can contribute a bug chunk of code to your bundle depending on how you import from it. For example:

// includes the entire package (very large)import * as _ from 'lodash';// depending on your buildchain, may still include the entire packageimport { flatten } from 'lodash';// imports only the code needed for `flatten`import flatten from 'lodash-es/flatten'

Personally I still wanted smaller footprints from my utility functions. E.g. flatten can contribute up to 1.2K to your bundle, after minimization. So I've been building up a collection of simplified lodash functions. My implementation of flatten contributes around 50 bytes. You can check it out here to see if it works for you: https://github.com/simontonsoftware/micro-dash