Originally posted at: Medium
You may have heard about differential loading. It’s an upcoming feature of the Angular CLI 8 and it creates separate bundles for ES2015 and ES5:
The main benefit of the ES2015 bundle is that it takes advantage of new language features and requires less polyfills, resulting in a smaller bundle size.
I thought about using this feature to benefit from smaller bundle sizes in my Ionic apps but realized that when packaging the app, shipping two bundles instead of one would not reduce the size, but increase it.
In the context of packaged hybrid mobile apps, it does not make sense to embed different bundles of the same code.
Fortunately, we don’t even need to ship an ES5 bundle because mobile browsers have great support for ES2015 (formerly known as ES6): https://caniuse.com/#feat=es6
In short, don’t create separate bundles but simply go with ES2015 right away.
We don’t even have to update to the next CLI version to achieve this. So if you’re “still” using Angular CLI 7, all we have to do is configure the TypeScript compiler to target es2015 instead of es5:
"target": "es2015"In addition, we’re turning off es5BrowserSupport:
es5BrowserSupport and set it tofalseIf you’re using the Angular CLI 8, es2015 is already the default, but you will have to configure differential bundling to create only a single build for ES2015. This is well documented in the docs and you can read about it here: Configure Differential Loading
After running a new production build on my app Citybikes Vienna with Angular CLI 7 using ES2015 and without Es5BrowserSupport, I figured that these 2 simple changes reduced the bundle size by 390 kB (-13%):
Satisfied with this quick win I checked if the smaller bundle size and the difference in the compilation have an actual effect on the app’s performance. While there are more reliable and statistically correct tests, I simply used an actual device and measured the startup time of the app after installation. This video compares the two apps side by side:
On this Samsung Galaxy S9 with Android 8.0 (API level 26), the startup time improved from 613 ms to 532 ms. So, yes, it did speed things up!
Side note: If you calculate the relative difference in startup time, it’s -13% as well, just like the file size. But this is only by chance, it doesn’t mean that they are in a relation of proportionality. The important thing is that the startup time has decreased.
To wrap it up, the ES5 app is quite fast as well, but the ES2015 bundle really is faster and is more efficient in terms of file size. Thanks to the simple configuration options of Angular and Typescript, it’s only a matter of flipping two switches:
So, let’s go for it!
If you like to check out the performance yourself, you can get my free bike sharing app here:
