Precarga automáticamente los vínculos en el viewport con el vínculo rápido para aplicaciones de una sola página de React.
La recuperación previa es una técnica para acelerar las navegaciones descargando los recursos de la página siguiente con anticipación. Quicklink es una biblioteca que te permite implementar esta técnica a gran escala, ya que precarga automáticamente los vínculos a medida que aparecen en la vista.
En las apps de varias páginas, la biblioteca precarga documentos (p.ej., /article.html) para los vínculos en el viewport, de modo que, cuando el usuario haga clic en estos vínculos, se puedan recuperar de la caché de HTTP.
Por lo general, las apps de una sola página usan una técnica llamada división de código basada en rutas. Esto permite que el sitio cargue el código de una ruta determinada solo cuando el usuario navegue a ella. Estos archivos (JS y CSS) se suelen denominar "fragmentos".
Dicho esto, en estos sitios, en lugar de almacenar en caché los documentos, los mayores aumentos de rendimiento provienen de almacenar en caché estos fragmentos antes de que la página los necesite.
Lograr esto presenta algunos desafíos:
- No es trivial determinar qué fragmentos (p.ej.,
article.chunk.js) están asociados con una ruta determinada (p.ej.,/article) antes de llegar a ella. - No se pueden predecir los nombres de URL finales de estos fragmentos, ya que los empaquetadores de módulos modernos suelen usar hash a largo plazo para el control de versiones (p.ej.,
article.chunk.46e51.js).
En esta guía, se explica cómo Quicklink resuelve estos desafíos y te permite lograr la carga previa a gran escala en apps de una sola página de React.
Determina los fragmentos asociados con cada ruta
Uno de los componentes principales de quicklink es webpack-route-manifest, un complemento de webpack que te permite generar un diccionario JSON de rutas y fragmentos.
Esto permite que la biblioteca sepa qué archivos necesitará cada ruta de la aplicación y los precargue a medida que las rutas aparecen en la vista.
Después de