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:
routerLinks within the viewport (using Intersection Observer)
- Waits until the browser is idle (using requestIdleCallback)
- Checks if the user isn't on a slow connection (using
navigator.connection.effectiveType) or has data-saver enabled (using
- Prefetches the lazy loaded modules using Angular's prefetching strategy)
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).
First you need to install the project:
npm i ngx-quicklink --save
After that import the
QuicklinkModule to the
AppModule, and use the
preloadingStrategy in the router's configuration. For example:
If you want to add a route in the ignore list so that
ngx-quicklink will not preload it use the
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 to see how
ngx-quicklink is integrated in the angular-realworld-example-app.
For a demo, look at the
example directory. To run the project use:
cd ngx-quicklink && npm i && npm run releasecd example && npm i && ng serve
- Includes a very small fallback for requestIdleCallback
- Optionally requires
IntersectionObserverto be supported (see CanIUse). On older browsers
ngx-quicklinkpreloads all links on the page. If you want to enable the
IntersectionObserverbehavior on older browsers you can use conditional polyfill loading:
Alternatively, see the Intersection Observer polyfill.
What's the difference between quicklink and ngx-quicklink?
quicklink prefetches the resource pointed by the
hrefattribute of an anchor. This doesn't work for Angular because the value of the
Should I use Guess.js 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.