Angular Build with Webpack and Babili

Published: Fri Jun 02 2017

In the following post I will show that you can shrink the footprint of your Angular Webpack build by switching to ES6 and Babili.

Angular currently ships in two different formats; flat ES5 and ES6 bundles.

I should point out that the ES5 build is not really a pure ES5 build since the bundle includes ES6 import and export statements. The reason for creating a hybrid format like this is better support for Tree shaking.

Why ship both ES5 and ES6?

The safest choice is still ES5 since it will run in all browsers without down leveling. However, there are some advantages to the ES6 build if you are targeting modern browsers.

Since Angular is written in TypeScript, the ES5/ES6 versions are down leveled versions of the original TypeScript. When transpiling TypeScript classes to ES5 you end up with relatively verbose representations of the original classes.

Angular has introduced a new setting in package.json to reference ES6 bundles. This new setting is simply called “ES2015”. From what I can tell, this setting is not directly supported by Webpack.

To get around this I had to cheat by updating the established “module” setting in package.json to point to the ES6 builds. This will cause Webpack to pick up the ES6 bundles instead of the default ES5 bundles.