ngx-quicklink
An Angular router preloading strategy that automatically prefetches lazy-loaded modules for visible links.
What is ngx-quicklink?
ngx-quicklink is an Angular library that implements a smart preloading strategy for the Angular router. It automatically prefetches lazy-loaded modules associated with visible links on the screen, aiming to make subsequent page navigations faster. It adapts to user conditions by checking viewport visibility, browser idle time, and network speed.
Angular developers building single-page applications who want to improve navigation performance through automatic, intelligent prefetching of lazy-loaded routes.
Developers choose ngx-quicklink for its drop-in integration with Angular's router, its lightweight size, and its automatic optimization that requires minimal configuration compared to manual or predictive preloading strategies.
Overview
Quicklink prefetching strategy for the Angular router
Use Cases
Best For
- Improving perceived performance in Angular applications with lazy-loaded modules
- Automatically prefetching routes based on user viewport without manual configuration
- Optimizing navigation speed for Angular single-page applications
- Implementing connection-aware prefetching to avoid wasting bandwidth on slow networks
- Adding intelligent preloading to Angular apps with minimal bundle size impact
- Enhancing user experience by reducing load times for frequently accessed routes
Not Ideal For
- Angular applications that do not use lazy-loaded modules, as prefetching has no effect without lazy loading.
- Projects where server-side rendering handles most navigation, since ngx-quicklink optimizes client-side SPA transitions.
- Teams requiring predictive prefetching based on user analytics data, as it relies solely on viewport detection without historical insights.
- Applications with a vast number of infrequently accessed routes, where automatic prefetching might waste bandwidth without significant user benefit.
Pros & Cons
Pros
At only ~2KB minified/gzipped, it adds negligible overhead to your application's size, as highlighted in the README.
Uses Intersection Observer to prefetch only links visible in the user's viewport, optimizing resource usage based on real-time visibility.
Checks for slow connections via navigator.connection and waits for browser idle time with requestIdleCallback, preventing performance degradation on poor networks.
Drop-in configuration with QuicklinkStrategy and QuicklinkModule makes setup straightforward for standard Angular apps, requiring minimal code changes.
Cons
For lazy-loaded modules, QuicklinkModule must be imported in shared modules and re-imported in lazy contexts, leading to setup errors and debugging challenges, as admitted in the debugging section.
Without Intersection Observer support, it preloads all links on the page, which can be inefficient and counterproductive on older browsers, requiring polyfills for optimal behavior.
Relies solely on viewport visibility, missing opportunities to prefetch based on user behavior patterns, unlike analytics-driven solutions like Guess.js, which the README acknowledges as more accurate.
Frequently Asked Questions
Related Projects
ui-routerUI-Router for Angular: State-based routing for Angular (v2+)
xng-breadcrumbA lightweight, configurable and reactive breadcrumbs for Angular 2+
ngx-back-buttonAngular back button
ngx-multi-level-push-menuMulti-level push menu is cross-browser compatible angular 6+ component allowing endless nesting of navigation elements.
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.