The Angular team is detailing new tools and practices developers can take in order to decrease their initial load times and speed up page navigation. The team goes over code splitting, preloading strategies, performance budgets and efficient serving to help developers gain and retain their users.
RELATED CONTENT: Angular 8 released with builder APIs and web worker support
Developers can use ngx-loadable and @herodevs/hero-loader libraries to help code-splitting on a component level.
For route-level code-splitting, Angular added a new command that enables users to generate a lazy module in a single command instead of having to write boilerplate code.
The Angular team also added a preloading strategy for routes to ensure good UX. “Once we introduce a lazy route in our app, when the user navigates to it, Angular will first download the corresponding bundle from the network. On a slow internet connection, this could lead to a bad UX,” Gechev explained.
Angular provides quicklink for preloading modules associated with visible links and predictive prefetching for preloading modules that will likely be needed next.
In order to ensure performance won’t regress over time, the team also introduced performance budgets. “To monitor our apps over time, the Angular CLI supports performance budgets. The budgets allow us to specify limits in which the production bundles of our app can grow,” Gechev wrote.
Lastly, the team introduced a new deploy command for producing efficient builds and deploying apps to a selected hosting provider.
More information is available here.