No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Caché de assets

10/20
Recursos

Aportes 8

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Las dos formas de utilizar installMode:

  • prefetch (Toma todos los archivos definidos (css / js) y los guarda en cache automáticamente)
  • lazy (Cuando el usuario lo solicita se guarda en cache)

Lo que no se cachea por defecto son las peticiones hacia una URL, hacia una API.

Ja ja, yo soy lazy, cuando me detectan , me alisto.

Que pasa con los módulos que se cargan con lazy loading en angular, estos archivos igual son cacheados la primera vez que se ingresa a la aplicación?

Como funciona la cache en los assets,
configuración por defecto:

{
  "index": "/index.html",
  "assetGroups": [ // indica como hacer la cache de los archivos estáticos
{ 
    "name": "app",  // nombre del grupo de cache
    "installMode": "prefetch",
    "resources": {
      "files": [ // archivos en cache
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**",
        "/font/*"
      ]
    }
  }],
  "dataGroups": [
    {
        "name": "api-product",
        "urls": ["/api/products"],
        "cacheConfig" : {
            "maxSize": 100,
            "maxAge": "5d"
        }
    }],
    "navigationUrls": [
      "/**"
    ]
}

prefetch: Precargas los archivos de una vez, desventaja consume ancho de banda desde el principio, esto es recomendado para archivos js css
lazy: a modo que detecta que lo solicita el usuario, va guardandolo en cache, esto es recomendado para imágenes.

Cada vez que compilamos la compilacion de webpack generar un id unico en los archivos, asi detecta que debe descargarlos.

Algunos assets no tienen hash, como imagenes, se debe utilizar la técnica lazy, que permite que se haha cache cuando detecte que lo solicita el usuario.

osea cachea todo lo que accedemos.

archivo: ngsw-config.json

assetGroups: Indica como hacer cache de los archivos estaticos

El codigo y contenido requerido necesarios para la aplicación sea cacheados y actualizado cuando hay una nueva version disponible, asegurarse que las actualizaciones son aplicadas consistentemente cuando esta disponible, usando la configuracion de la sección assetsGroups, del archivo de configuracion.

Para la instalacion(installMode) y actualizacion(updateMode) de la cache puedes elegir estas dos opciones

prefetch: Precargas los archivos de una vez, desventaja consume ancho de banda desde el principio, esto es recomendado para archivos del primer grupo que conforma la aplicacion, ( js css), ya que cada vez que compilamos la compilacion de webpack generar un id unico en los archivos, asi detecta que debe descargarlos.

lazy: a modo que detecta que lo solicita el usuario, va guardandolos en cache, esto es recomendado para los assets que no tienen hash, como imagenes, se debe utilizar la técnica lazy, que permite que se haga cache cuando detecte que lo solicita el usuario.