• ES2015 bundles will be loaded by modern browsers
• ES5 bundles will be loaded by older browsers

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.

Proposal

In the context of packaged hybrid mobile apps, it just bloats the app size when you embed separate bundles of the same code.

The reason why I propose not to use differential loading in hybrid mobile apps is that we don’t even need to ship an ES5 bundle. It turns out that mobile browsers have great support for ES2015 (formerly known as ES6) already: https://caniuse.com/#feat=es6

In short, don’t create separate bundles but simply go with ES2015 right away.

How-to

Here are the steps on how to configure differential loading for your Angular app to only produce an ES2015 bundle:

Angular CLI 8+:

If you’re using the Angular CLI 8+, es2015 is already the default compile target. This already produces a bundle for ES2015, but during a production build, Angular’s build process will also generate a bundle for ES5, which is needed for differential loading on older browsers. To keep our package tidy, we want to go for the newer ES2015 bundle only. This means we need to configure Angular’s build process to disable differential loading and only create a single build for ES2015. On top of that, skipping the ES5 bundle generation also speeds up the whole build process. These are the necessary steps:

• Create a file named browserslist in the root of your Angular/Ionic project (in case you already have such a file, continue with that one)
• Copy the browser settings from the code below or this browserslist template, which represent browsers with full support for ES2015. This defines our minimum feature set and leaves out all browsers which do not support our desired features, effectively disabling browsers which only support ES5:

Chrome >= 71   # let's keep it simple by picking only one desktop browser with full ES2015 support
Android >= 56
ios_saf >= 11
safari >= 11

Angular CLI 7:

If you’re using the Angular CLI 7 or lower, the process is even simpler. All you have to do is configure the TypeScript compiler to target es2015 instead of es5:

1. Open the file tsconfig.json
2. In compiler options, set "target": "es2015"

In addition, we’re turning off es5BrowserSupport:

1. Open the file angular.json
2. Find or create the build option es5BrowserSupport under projects/app/architect/build/options and set it tofalse

That’s it. Our build will now produce only one bundle and our code will run on all modern mobile browsers nevertheless.

If you want to learn more about configuring differential loading, you can read about it in the Angular docs here: Configure Differential Loading. In any case, we’re already set for creating a smaller bundle with less polyfills.

Size and Performance Comparison

After running a new production build on my app Citybikes Vienna using the Angular CLI 7, I figured that creating a modern ES2015 bundle without ES5BrowserSupport reduced the bundle size by 390 kB (-13%):

• Old size: 2953 kB
• New size: 2563 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 performance gain in the startup time, the saving is also 13%, just like with the file size. But this is only by chance, it doesn’t mean that they are in a relation of proportionality. The important thing to take away here is that the startup time has decreased too, which is yet another quick win.

Summary

To wrap it up, the ES5 app is quite fast already, but the ES2015 bundle is still faster and also 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:

1. Target: ES2015
2. Disable ES5

So, let’s go for it!

If you like to check out the performance yourself, you can get my free bike sharing app here:

Citybikes Vienna | Bike Sharing App

Quick wins for your Ionic Angular App with ES2015 was originally published in Webtips on Medium, where people are continuing the conversation by highlighting and responding to this story.

Intro

These rental bikes are available free of charge for one hour and are the most eco-friendly choice to travel through Vienna. And yes, they are more environmentally friendly than scooters, simply because they are powered by your feet rather than an electric engine. 😉

There are currently 121 bike stations across Vienna and they’re available 24/7. Stations have a limited number of available bikes and a limited number of available boxes. You can return your bike wherever you find a station with an available box and thus keep the sidewalks free from parked bikes.

Visualization

Impressed by this service, I built an app to tell you more about bike rentals from Vienna’s Citybike stations. The app can be used to check any station for the current availability of bikes. In addition, it lets you visualize the utilization of all stations within the last hour. As basis for this, each station is visualized by a badge with two numbers:

Left: the number of available bikes | Right: the number of available boxes for returns

To show you this visualization in action, I created a video that shows bike rentals on a sunny and calm Saturday afternoon in Vienna in March 2019.

It visualizes data of an entire hour in less than 2 minutes:

Utilization analysis

Within only one hour, more than 700 bikes were borrowed.

At any given time, the most visited station is visualized at the top right. Hot spots like Museumsplatz have up to three rentals per minute, which essentially means that such stations are busy nonstop.

In addition to the number of rentals, the app visualizes the utilization of every Citybike station using a heat map. A dark red circle around a station indicates that there were 10 or more rentals or returns at that station within an hour. Telling by the heat map, almost all of the 121 stations were used quite frequently over this short period.

Download the free app

If you’d like to see this action for yourself and find out more, you can use my free app “Citybikes in Vienna” for an interactive time-lapse of Vienna’s Citybike rides. Or, if you feel like it, you can use this app to find your nearest Citybike station and start cycling yourself. 🚴‍♀️🚴‍♂️

Citybikes Vienna | Bike Sharing App