Everyone knows that building performant web apps is critical for retaining happy users. However, with the constant influx of bugs to fix and new features to build, this is easier said than done.

Fortunately, there are several steps you can take to improve your Angular app’s performance substantially. Recently, Stephen Fluin from the Angular team delivered a  web.dev conference talk titled “How to stay fast and fresh with Angular,” with tips on improving Angular app startup performance and bundle size. His suggestions were excellent and included several I had never tried before, so I decided to put them to the test in a real Angular app.

The following post reviews Stephen’s Angular performance tips applied through the lens of an Ionic app, Ionifits, a Zenefits-inspired human resources demo app. It showcases various Ionic App Platform technologies, including Ionic Framework, Capacitor, and  Ionic Native Enterprise solutions. Try it out on the  web,  iOS, or  Android.

By applying these tips, I was able to improve Ionifits’ Lighthouse performance score by ~20 points. Let’s dig in.

Reduce app bundle size with source-map-explorer

Modern web apps, including Angular apps, are transformed in various ways before running in a web browser: JavaScript files are combined then minified or occasionally machine-generated. To debug an app or review its bundle size, the source is inspected using source maps that map the transformed source to the original source. Examining source maps is a great way to understand what’s happening between the code you write and the code shipped to the end-user.

#angular #framework #performance #ionic