The world of web development is constantly evolving, along with the techniques and strategies for optimizing the performance of our applications. One of the most common challenges Angular developers face is the initial loading time of their applications. As application size increases, it becomes increasingly important to find solutions that enhance performance and improve the user experience. This is where ngx-fastboot comes into play.
What is ngx-fastboot?
ngx-fastboot is a library designed to dynamically load Angular application configurations, optimizing startup time and reducing the size of the initial bundle đ
ngx-fastboot is an Angular library designed to dynamically load configuration settings at runtime, optimizing application startup performance by offloading configurations to a separate compilation chunk.. Latest version: 1.2.1, last published: a month ago. Start using ngx-fastboot in your project by running `npm i ngx-fastboot`. There are no other projects in the npm registry using ngx-fastboot.
npmjs.com
 When to Use ngx-fastboot?
There are no restrictions on when to integrate ngx-fastboot into your Angular project. You can implement it right from the start or wait until the size of your bundle starts impacting performance đ¤
 Why Use ngx-fastboot?
Reduction in Initial Bundle Size: One of the main reasons to consider using ngx-fastboot is its ability to reduce the size of your applicationâs initial bundle. By loading configurations in separate chunks, it lightens the main bundle, allowing the application to start faster.
Improved Performance: With smaller bundles, the initial loading time of the application is significantly reduced. This is especially crucial for users with slower connections, where every kilobyte matters. Enhancing performance also means delivering a better overall user experience.
Meeting Recommended Budgets: Angular can generate warnings and errors if the initial bundle size exceeds recommended limits. By leveraging ngx-fastboot to distribute the load across multiple chunks, you can reduce the likelihood of running into these issues and keep your project aligned with Angularâs best practices.
Installation
Installing ngx-fastboot is quick and easy. You can add the library to your Angular project by running the following command in your terminal:
npm install ngx-fastboot
 Usage
Once the library is installed, you can start using it to dynamically load your applicationâs configurations đ.
Create your first configuration file in src/configs/angular.configs.ts. ngx-fastboot natively supports both default and named imports; for convenience, we'll use the default import:
import{AppComponent}from'./app.component';import{bootstrapApplication}from'@angular/platform-browser';import{fast}from'ngx-fastboot';fast(bootstrapApplication,AppComponent,{providers:[()=>import('./configs/angular.configs.ts'),]}).catch(error=>{console.error('Error bootstrapping the app',error);});
ngx-fastboot allows us to include providers using the static bootstrapApplication approach, giving us precise control over which configurations to make dynamic and which to keep static. This flexibility helps optimize the performance and organization of our Angular application.
import{AppComponent}from'./app.component';import{bootstrapApplication}from'@angular/platform-browser';import{fast}from'ngx-fastboot';fast(bootstrapApplication,AppComponent,{providers:[{provide:'BACKEND_BASE_URL',useValue:'http://localhost:3000'},()=>import('./configs/angular.configs.ts'),]}).catch(error=>{console.error('Error bootstrapping the app',error);});
Performance
For illustration, letâs create an Angular application where we initialize AngularFire and Sentry using the traditional approach. After building the application, the bundle structure will be similar to the following:
Initial chunk files | Names | Raw size | Estimated transfer size
main-P4HRQQFP.js | main | 659.65 kB | 180.05 kB
chunk-7LRM2SDL.js | - | 53.90 kB | 15.44 kB
polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 748.07 kB | 206.78 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-GV3HVVF4.js | index-esm | 121 bytes | 121 bytes
Application bundle generation complete. [3.898 seconds]
Ⲡ[WARNING] bundle initial exceeded maximum budget. Budget 512.00 kB was not met by 236.07 kB with a total of 748.07 kB.
With this approach, we have already exceeded the bundle size limit, resulting in a warning during the Angular build process!
However, by applying ngx-fastboot, the final bundle structure will look something like this:
This repository contains two Angular projects with the same dependencies, demonstrating two different approaches to bootstrapping the application. If you've read the related article, here you can personally test the final bundle size of the two projects.
Project Structure
classic/: An Angular app using the traditional bootstrapApplication method in the main.ts file.
fast/: An Angular app using ngx-fastboot for an optimized bootstrap focused on performance.
Prerequisites
If you don't have pnpm, you can install it by running:
ngx-fastboot is a simple yet powerful tool for optimizing the performance of Angular applications. By dynamically loading configurations, you can reduce the size of the initial bundle, improve load times, and mitigate compilation warnings. If youâre looking for a way to optimize your bundle and speed up your Angular application, ngx-fastboot is definitely a solution worth considering.
If you found this guide helpful, donât forget to give it a â¤ď¸ and share it with others who might benefit from it đ.