5 ways to Optimize Your Ionic Angular App Performance in 2021

The Angular team has shipped their latest major release last month, angular version 11. This update has worked on some of the major improvements for the great Angular ecosystem. It is certainly critical to building performant web apps in order to retain happy users. However, it isn’t an easy task with the constant influx of bugs to fix and new features to build. 

There are, fortunately, several steps that can be taken to improve the Angular app’s performance substantially. A few weeks ago, a web. dev conference talk on  “How to stay fast and fresh with Angular,” was delivered by Stephen Fluin from the Angular team.

The talk revolved around the measures to improve Angular app startup performance and bundle size. His suggestions were excellent and a few days later, they were applied through the lens of an Ionic app, Ionifits. Ionifitsis a Zenefits-inspired human resources demo app showcasing various Ionic App Platform technologies like Ionic Framework, Ionic Native Enterprise solutions, and Capacitor. These are ready to be tested in your web, iOS, or Android devices.

How to optimize your Angular app performance within an Ionic app

Ionic 5 offers an excellent performance out-of-the-box. Before we dive into how to apply the tops for improving the Angular app performance, let’s look into how to update to this new release. For updating to Angular 11, you will have to run ng update and list the dependencies you want to update:

ng update @angular/core @angular/cli 
npm install @ionic/angular-toolkit@latest

The update to @ionic/angular-toolkit has a breaking change for the 3.0 release. This helps in updating the core libraries of Angular as well as the CLI and build tools. However, users will have to stay on the @ionic/angular-toolkit@2, If they are not upgrading to version 11 of Angular. Having said that, let's dive into things.

Reduce app bundle size with source-map-explorer

Modern web applications, including Angular applications, are changed in different ways before running in a web browser: JavaScript files are joined, then minified or occasionally machine-created. To debug an application or audit its bundle size, the source is examined utilizing source maps that map the changed source to the original source. Examining source mapsis an extraordinary method to comprehend what's going on between the code you compose and the code sent to the end-user. 

The Angular team suggests the source-map-explorer tool in order to visualize your app’s code distribution. Users will have to first, install it:

$ npm i -g source-map-explorer

Next, users will have to open angular.json within the project. Locate the “configurations” node then set the “sourceMap” and “namedChunks” options to “true”:

// angular.json
  "configurations": {
  "sourceMap": true,
  "namedChunks": true,
}

Following the step, users will have to create a production build of their app:

$ ionic build --prod

Finally, you will have to run the source-map-explorer tool, specifying the JavaScript file for analyzing. 

The files with ionic apps begin with “main” that are found under the “www” folder. Users will have to run the following command for inspecting both the modern browsers (es2015) and legacy browsers (es5) bundles:

$ source-map-explorer www/main*.js

Running this order opens up a perception of your application's code distribution, including the code you've composed and the libraries you're utilizing, for example, Angular, Ionic Framework, RxJS, and Capacitor.

You will have to begin by assessing the structures/libraries you've included for unused code. It can sneak in overtime, for example, when a team member accidentally checks in a prototype. In Ionifits you will have to remove @angular/animations (specifically, app.module.ts referred to NoopAnimationsModule) which eliminates 53.81 KB (4.8% total) from the application. Post this, you will have to review your application code that is represented as the src section.

A typical issue here is unnecessary imports. In Ionifits one file,i.e the data/employeeData.js is represented over a portion of the application's size – 571.57 KB, or 54.2% of the application. The file incorporates thousands of fake “employees”, referred to on an employee directory listing page, in large file size. 

In the src/app/app.module.ts, the EmployeeService imports data from employeeData.js as a provider. 

import { EmployeeService } from './services/employee.service'; 
 providers: [
    {
 provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    EmployeeService
  ]

The total bundle size dropped from 1.03 MB to 481.77 KB after removing the unnecessary import and reiterating the source map explorer analysis. The src folder that is written on the app code, also shrunk in size in a way that it was no longer displayed in the source-map-explorer visualization.

Configure size budgets

Using source-map-explorer tool in addition to analyzing the bundle sizes, can also configure size budgets. Once your app is in production, it is challenging to reduce your app’s size. Hence, it is crucial to set the budget threshold that ensures the application to stay within the size boundaries you define.

Run this command to set size budgets within angular.json’s budgets section:

// angular.json
{  ...  "configuratio00000ns": {
    "production": {
      ...      budgets: [
        "type": "initial",
        "maximumWarning": "500KB",
        "maximumError": “800KB"
       ]      }    }}

The Angular CLI will show a console warning if the application’s initial size exceeds 500KB while building the application. However, the build will fall, if it gets larger than 800KB.

Split your App into Modules for Native Angular lazy loading

Ionic Angular apps embrace the lazy loading modules when a user navigates to their route the first time. This strategy is critical for the app performance for reducing the initial bundle size. Use the following command to generate a command for creating a lazily loaded module:

$ ng generate module --module app-module --route about about

The new ionic apps that were created using the start command, are pre-arranged with lazy loading and resulting application pages, utilizing the Ionic CLI's generate command that are consequently designed as lazy loaded modules, too.

$ ionic generate page about/about

Keep Angular up-to-date regularly with “ng update”

Updating the dependencies always calls for the high risk of something breaking, which distracts from actually building more features for your application. The Angular team works amazingly well for the Angular CLI’s update process, which updates the Angular packages while applying code transformations as required for you. 

First, run the following command suggested by the Angular team to update the CLI and the core:

$ ng update @angular/cli @angular/core

Secondly, if there aren't any errors, users can update the rest of the Angular packages.

Afterward, update the rest of the Angular packages if there are no errors. 

Check out the Angular update guide, select the current version of your app and the version that it's being updated to. The guide will walk you through the steps, during and after the update. The updating is easy and convenient as there’s very little manual work to do. The CLI looks after most of the changes for you.

Run the following command for updating the Ionic dependencies of your app in a single command away:

# Ionic Angular$ npm update @ionic/angular@latest 
 # Capacitor$ npm update @capacitor/core@latest @capacitor/ios@latest @capacitor/android@latest

Reference the package.json files in the Ionic starter template apps for ensuring if all dependencies will work together. The template apps are updated and support the latest compatible versions by the Ionic Framework and DevRel teams.

Hot Module Replacement (HMR)

And finally, while balancing the CLI  improvements, the brand new Hot Module Replacement (HMR) feature is truly a cherry on top. The Hot Module Replacement is a method to make changes to your deserver without having to do a full rebuild of your app. This used to exist in the other frameworks and now angular development has been provided a great HMR experience too. 

Even though HMR works amazingly well in Angular itself, however, there is room for improvements with how it interacts with Ionic. The new patch release will have this concern already fixed. 

Run the following command to use HMR with developing Ionic applications:

ionic serve -- --hmr

The Hot Module Replacement with the above patch applied enhances the overall experience for developers.

Building More Performant Ionic Angular Apps

Improving the performance of an Angular app can appear to be complicated and overwhelming. Fortunately, utilizing Angular’s out-of-the-box tooling, which includes configuring size budgets, implementation of lazy loading, balancing the CLI improvements with HMR features, goes a long way by doing half the work for you. Keeping the application updated consistently and occasionally utilizing source-map-wayfarer to look out for further optimizations is valuable keeping performance in check over time. These are just a couple of instances of Ionic Angular performance optimizations that can be executed.

Read More: What're New Features In Ionic 6 Beta