Building a great web app development is critical for retaining happy users. But with continuous influx of bugs to fix and new features to build, it becomes easier. There are some important steps that you can take to improve your angular App’s performance substantially. Few months before, a web.dev conference discussed “How to stay fast and fresh with Angular”. The discussion was about the measures to improve angular app performance and bundle size. The suggestions from this discussion were applied through the lens of an ionic app, Ionifits. Ionifits is a Zenefits-inspired human resource 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.
Ionic Angular applications has the lazy loading modules when a user navigates to their route the first time. This way is critical for the application performance for reducing the initial bundle size. Use the accompanying command to create a command for making a lazily loaded module:
$ ng generate module --module app-module --route about about
New ionic apps that were developed using the start command, are pre-arranged with lazy loading and resulting app pages, using the Ionic CLI’s generate command that subsequently designed as mazy loaded modules.
$ ionic generate page about/about
Dependency updations consistently calls for the high risk of something breaking, which distracts from building more features for your application. Angular team is working great for Angular CLI’s update process, that updates the Angular packages when applying code transformations as needed for you. At first, run the below command to update the CLI and core-
$ ng update @angular/cli @angular/core
Then, if there aren’t any bugs, users can update angular packages. Check the angular update guide, choose the current version of app and the version that it’s being updated to. Overall updating is easy and convenient because there is very less manual work to do. The CLI looks after changes for you. Run the below command to update the Ionic dependencies of app-
# 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 to ensure whether dependencies will work together. The template apps are updated and support latest compatible versions by Ionic framework and DevRel teams.
To analyze bundle sizes, you can use the source-map-explorer tool and also configure size budgets. Reducing the size of application is challenging when in production, so setting budget thresholds ensures the app stays within the size boundaries you define. Set size budget within angular.json’s budgets section.
// angular.json { ... "configurations": { "production": { ... budgets: [ "type": "initial", "maximumWarning": "500KB", "maximumError": “800KB" ] } } }
The suggested budgets to set vary, as every app is different. In the above example, if the initial size of app increases more than 100KB, the angular CLI will show a console warning when you build the application. If it gets more than 800KB, it will fail the build.
When balancing the CLI improvement, the new Hot Module Replacement(HMR) feature will be great for you. The Hot Module Replacement method make changes to your deserver without having to do a full rebuild of your app. Generally this exist in other frameworks and now Angular has been provided a HMR experience also. Despite the fact that HMR works admirably in Angular itself, however, there is space for improvements with how it collaborates with Ionic. The new release will have this concern already fixed.
Run the below command to use HMR with developing Ionic apps.
ionic serve -- --hmr
The Hot Module Replacement improves the overall experience for developers.
Angular apps are changed in various ways before running in a web browser. Javascript files are joined, then minified or occasionally machine-created. To debug an app or audit its bundle size, the source is examined using source maps that map the changed source to the original source. Analysing source maps tells you what’s going on between the code you compose and code sent to the end-user. The tool source-map-explorer visualizes your app’s code distribution. Users need to install it-
$ npm i -g source-map-explorer
Then, users 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
At long last, you should run the source-map-explorer tool, determining the JavaScript file for analyzing. Files with ionic apps starts with “main” found under the “www” folder. Users will have to run below command for inspecting both modern browsers(es2015) and legacy browsers(es5) bundles:
$ source-map-explorer www/main*.js
This command opens up a perception of app’s code distribution, including the code you’ve composed and the libraries you’re using. You’ve to start by evaluating the structures/libraries you’ve added for unused code. It can sneak in overtime, for instance, when a team member checks in a prototype. In Ionifits you should eliminate @angular/animations (explicitly, app.module.ts referred to NoopAnimationsModule) that eliminates with 53.81 KB (4.8% total) from the application. Post this, you should review your application code that is addressed as the src section. Unnecessary imports is a general issue. In Ionifits one file, i.e the data/employeeData.js is represented over a portion of app size – 571.57 KB or 54.2% of app. File includes thousands of fake “employees”, referred to 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 ]
Package size decreased from 1.03 MB to 481.77 KB after eliminating the unnecessary import and reiterating the source amp explorer analysis. Src folder written on app code also reduces in size in a way that it was displayed in the source-map-explorer visualization.