While some of the Ionic team is busy working on the Web Component based version of Ionic 4, we still get to enjoy frequent releases of Ionic 3.x.

Last week delivered us Ionic 3.7, which brough the version of Angular used up to 4.4.3 (from 4.1.3) which brings us the new HttpClient API, amongst other changes.

The corresponding update to @ionic/app-scripts also brings us the CLI update which incorporates the new angular optimizer build tool, ngo.

Every little optimization adds up, a few percent here, a few percent there, and chips away at the one of the reasons you might not choose to build a cordova app over native, which is performance.

The ngo optimizer applies more smarts to further reduce the final bundle size, which should help shave some millisceonds off the startup time. We measured the size of the bundles from the dev and prod builds for ionic 3.6 and 3.7 to find out what improvements we could see.

The unoptimized vendor.js bundle, which contains all the library code from node_modules, increased in size slightly after updating the ionic and angular dependancies from 3.6 to 3.7. There was a very tiny improvement in the compression ratio, only about 0.04%, with a very small overall increase in the final optimized bundle.

In the main.js bundle, which is our application code, there was a much larger increase in the compression ratio. There optimized build went from 491kb down to 437kb, which takes about 10% off the bundle size.

iOS users have more performance improvements to look forward to with the cordova-plugin-ionic-webview plugin to enable the WKWebView is being added by default soon for new Ionic projects.

With Ionic 4 built on Angular 5 we can look forward to event more improvements with the Stencil based web components and other optimizations.

Build issues

In our git repository the project structure is like so:

|
|- app
|  ˪ src
|  ˪ package.json
|  ˪ ...
|- docs
|- server
   ˪ src
     ˪ data-model.ts
     ˪ ...
   ˪ package.json
   ˪ ...

The new compiler had one issue with our code setup. The app project references a TypeScript file in the server project. This file contains a number of interfaces for the data model which is shared between the server and app.

The compiler was expecting a data-model.js and data-model.js.map file in the same folder as the data-model.ts file. The server build script outputs the compiled js to a separate build folder so for now we have just committed the expected js and js.map file to the src.

While its not ideal to commit the compiled code to the src folder, but it will do for now so we can keep up with the latest Ionic releases. The data-model.js file is actually empty as the .ts file only contains interfaces, which means the .js.map is very small and static.