Skip to content

rubenperegrina/angular-prefetching

Repository files navigation

Load Optimization in Angular 🚀

The goal of this repository is to help tou improve the navigation enxperience of your Angular aplications 💥

Here are five techniques you can use to improve your application's performance:

By using Angular Router, modules will be loaded only when they are needed.

  • Create modules for your routes and include a loadChildren method in them:
  {
    path: 'about',
    title: 'About',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
  },

While the user navigates the application, all modules are loaded in the background.

  • In your routing module, you need to add PreloadAllModules:
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})

Implement the Angular PreloadingStrategy to create your own load strategy.

  • In your routing module, you must add the PreloadingStrategyService:
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadingStrategyService
  })],
  exports: [RouterModule]
})
  • Manage your routes with a service:
export class PreloadingStrategyService implements PreloadingStrategy {
  
  private preloadedModules: string[] = [];

  preload(route: Route, load: () => Observable<any>): Observable<unknown> {
    if (route.data && route.data['preload'] && route.path) {
      this.preloadedModules.push(route.path);
      return load();
    } else {
      return of(null);
    }
  }
}
  • Finally, add the preload flag to your routes:
  {
    path: 'about',
    title: 'About',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule),
    data: { preload : true }
  },

Use the Quicklink library to prefetch modules on demand based on the elements visible in the user's viewport.

Instalation

npm i ngx-quicklink
  • Add the QuicklinkStrategy in your routing-module:
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: QuicklinkStrategy
  })],
  exports: [RouterModule]
})

Use GuessJS, a library that uses machine learning to predict which module is most likely to be loaded based on Google Analytics history.

Instalation

npm i -D @angular-builders/custom-webpack
npm i -D @angular-devkit/build-angular
npm i -D guess-webpack
npm i -D guess-parser
  • You should create a file with your GA key:
const { GuessPlugin } = require('guess-webpack');
const { parseRoutes } = require('guess-parser');

module.exports = {
  plugins: [
    new GuessPlugin({
      GA: 'XXXXXXXXX',
      runtime: {
        delegate: false
      },
      routeProvider() {
        return parseRoutes('.');
      }
    }),
  ]
};
  • In your package.json you need to put the custom builder:
"builder": "@angular-builders/custom-webpack:browser",
"options": {
  "customWebpackConfig": {
    "path": "./extend.webpack.config.js"
  },
},

Releases

No releases published

Packages

No packages published