3 minutes reading time (545 words)

Quick wins for your Ionic Angular App with ES2015

Quick wins for your Ionic Angular App with ES2015 Performance Comparison: CItybikes Vienna

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:

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


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:

  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 the build option es5BrowserSupport and set it tofalse

If 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%):

  • Old size: 2953 kB
  • New size: 2563 kB

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:

  1. Target: ES2015
  2. Disable ES5 browser support

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

Citybike Vienna ❤️ Warm Temperatures
 

Comments

No comments made yet. Be the first to submit a comment

София Дървени материали

София Дървени дъски