Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mgechev/ngx-quicklink

Quicklink prefetching strategy for the Angular router
https://github.com/mgechev/ngx-quicklink

angular intersection-observer performance prefetch speed

Last synced: 3 days ago
JSON representation

Quicklink prefetching strategy for the Angular router

Awesome Lists containing this project

README 

        


  



# ngx-quicklink



[quicklink](https://github.com/GoogleChromeLabs/quicklink) implementation for Angular. It provides router preloading strategy which automatically downloads the lazy-loaded modules associated with all the visible links on the screen.



## How it works



Quicklink attempts to make navigations to subsequent pages load faster. It:



* **Detects `routerLink`s within the viewport** (using [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))

* **Waits until the browser is idle** (using [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback))

* **Checks if the user isn't on a slow connection** (using `navigator.connection.effectiveType`) or has data-saver enabled (using `navigator.connection.saveData`)

* **Prefetches the lazy loaded modules** using Angular's prefetching strategy)



## Why



This project aims to be a drop-in solution for sites to prefetch links based on what is in the user's viewport. It also aims to be small (**~2KB minified/gzipped**).



## Usage



First you need to install the project:



```bash

npm i ngx-quicklink --save

```



After that import the `QuicklinkModule` to the `AppModule`, and use the `QuicklinkStrategy` as `preloadingStrategy` in the router's configuration. For example:



```ts

// ...

import { QuicklinkModule, QuicklinkStrategy } from 'ngx-quicklink';



@NgModule({

  declarations: [...],

  imports: [

    // ...

    QuicklinkModule,

    RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }),

  ],

  bootstrap: [...]

})

export class AppModule {}

```



If you want to add a route in the ignore list so that `ngx-quicklink` will not preload it use the `data` property:



```ts

export const routes: Routes = [

  {

    path: 'contact',

    loadChildren: import(() => './contact/contact.module').then(m => m.ContactModule),

    data: {

      preload: false

    }

  }

];



```



**Note that to make the module available in lazy-loaded modules as well you need to import it in a shared module and export it.** Look at [this commit](https://github.com/mgechev/angular-realworld-example-app-qucklink/commit/33ea101c7d84bb5ca086f107148bbc958659f83f) to see how `ngx-quicklink` is integrated in the [angular-realworld-example-app](https://github.com/gothinkster/angular-realworld-example-app).



## Debugging



**Not getting routes preloaded?** Most likely the problem comes from a missing import of the `QuicklinkModule`. The `QuicklinkModule` exports a `LinkDirective` which matches the `[routerLink]` selector. It'll hook into all your router links in the scope of the module and observe their visibility. If you've not imported the `QuicklinkModule` correctly, this directive will be missing and the quicklink preloading strategy will not work.



**How to verify Angular has made my links "quicklinks"?** Inspect a router link and check if it has `ngx-ql` attribute. If it does not, make sure you import `QuicklinkModule` in the module that defines the compilation context of the template where the router link is. Alternatively, if the `ngx-ql` attribute is there, but the prefetching does not work as expected, please open an issue.



## Polyfills



`ngx-quicklink`:



* Includes a very small fallback for [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)

* Optionally requires `IntersectionObserver` to be supported (see [CanIUse](https://caniuse.com/#feat=intersectionobserver)). On older browsers `ngx-quicklink` preloads all links on the page. If you want to enable the `IntersectionObserver` behavior on older browsers you can use conditional polyfill loading:



```html



```



Alternatively, see the [Intersection Observer polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).



## FAQ



*What's the difference between quicklink and ngx-quicklink?*



>quicklink prefetches the resource pointed by the `href` attribute of an anchor. This doesn't work for Angular because the value of the `href` attribute is not a JavaScript bundle but a path defined inside of the routing configuration. ngx-quicklink introduces some additional functionality to make the same strategy work well with Angular.



*Should I use [Guess.js](https://github.com/guess-js/guess) or ngx-quicklink?*



>The prefetching behavior of Guess.js would most likely be more accurate compared to ngx-quicklink, which will reduce the overfetching. Guess.js, however, may take a little more effort to setup. In case you don't want to integrate with the analytics of your website ngx-quicklink is the right choice for you.



## Developing & releasing



For a demo:



```shell

git clone [email protected]:mgechev/ngx-quicklink

cd ngx-quicklink && npm i

ng build --project ngx-quicklink

ng serve

```



To release first update the package version and after that:



```shell

npm run release

cd dist/ngx-quicklink

npm publish

```



## Contributors



[mgechev](https://github.com/mgechev) |[dependabot[bot]](https://github.com/apps/dependabot) |[wKoza](https://github.com/wKoza) |[rolaveric](https://github.com/rolaveric) |[thekiba](https://github.com/thekiba) |[Flyrell](https://github.com/Flyrell) |

:---: |:---: |:---: |:---: |:---: |:---: |

[mgechev](https://github.com/mgechev) |[dependabot[bot]](https://github.com/apps/dependabot) |[wKoza](https://github.com/wKoza) |[rolaveric](https://github.com/rolaveric) |[thekiba](https://github.com/thekiba) |[Flyrell](https://github.com/Flyrell) |



[Niaro](https://github.com/Niaro) |[krzysztof-grzybek](https://github.com/krzysztof-grzybek) |[tarsinzer](https://github.com/tarsinzer) |[mehmet-erim](https://github.com/mehmet-erim) |[Timebutt](https://github.com/Timebutt) |[pshurygin](https://github.com/pshurygin) |

:---: |:---: |:---: |:---: |:---: |:---: |

[Niaro](https://github.com/Niaro) |[krzysztof-grzybek](https://github.com/krzysztof-grzybek) |[tarsinzer](https://github.com/tarsinzer) |[mehmet-erim](https://github.com/mehmet-erim) |[Timebutt](https://github.com/Timebutt) |[pshurygin](https://github.com/pshurygin) |



[thomashuston](https://github.com/thomashuston) |[Komock](https://github.com/Komock) |[jlilly](https://github.com/jlilly) |

:---: |:---: |:---: |

[thomashuston](https://github.com/thomashuston) |[Komock](https://github.com/Komock) |[jlilly](https://github.com/jlilly) |



## License



MIT