Reducing Initial Load Time Of Susper
Susper used to take long time to load the initial page. So, there was a discussion on how to decrease the initial loading time of Susper.
Later on going through issues raised in official Angular repository regarding the time takento load angular applications, we found some of the solutions. Those include:
- Migrating from development to production during build:
- This shrinks vendor.js and main.js by minimising them and also removing all packages that are not required on production.
- Enables inline html and extracting CSS.
- Disables source maps.
- Enable Ahead of Time (AoT) compilation.
- Enable service workers.
After these changes we found the following changes in Susper:
File Name | Before (content-length) | After |
vendor.js | 709752 | 216764 |
main.js | 56412 | 138361 |
LOADING TIMES GRAPHS:
After:
Vendor file:
Main.js
Before:
Vendor file:
Main.js
Also we could see that all files are now initiated by service worker:
More about Service Workers could be read at Mozilla and Service Workers in Angular.
Implementation:
While deploying our application, we have added –prod and –aot as extra attributes to ng build .This enables angular to use production mode and ahead of time compilation.
For service workers we have to install @angular/service-worker module. One can install it by using:
npm install @angular/service-worker --save ng set apps.0.serviceWorker=true
The whole implementation of this is available at this pull:
https://github.com/fossasia/susper.com/pull/597/files
Resources:
- ng build API: https://github.com/angular/angular-cli/blob/master/docs/documentation/build.md
- Stack overflow discussion:https://stackoverflow.com/questions/40138334/angular2-slow-initial-page-load-caused-of-load-sequance
- Service workers: https://developer.mozilla.org/en/docs/Web/API/Service_Worker_API
You must be logged in to post a comment.