Aumentar la velocidad de tu aplicación usando Lazy Loaders en Ionic 3

Epale, ¿Cómo estás?. Hoy te voy a explicar como puedes lograr que tu aplicación se ejecute mas rápido utilizando los lazy loaders.

Requisitos:

 ¿Qué son los Lazy loaders?

Son piezas de código (modulos, proveedores, componentes, etc) que no quieres que sea cargados innecesariamente sino cuando tu aplicación realmente lo necesite. Las SPA tienen este problema y en una aplicación que es desarrollanda para un smartphone, no es la mejor de las ideas.

¿Como aplicarlos?

Primero vamos a generar un proyecto en blanco(si ya tienes uno puedes saltarte este paso), ejecutando el siguiente comando:

    ionic start lazy-loader blank

Luego vamos a editar el archivo app.module.ts

    import { HomePage } from '../pages/home/home';
    @NgModule({
      declarations: [
        MyApp,
        HomePage
      ],
      . . .
      entryComponents: [
        MyApp,
        HomePage
      ]
    })

Aquí podemos darnos cuenta que nuestra app por defecto importará el componente HomePage, esta declaración es innecesaria, obliga a nuestra app, cuando este abriendo a cargar este componente y a pesar que es nuestra ” pagina inicial ” podemos dejarle este trabajo al Lazy Loader.  Vamos a eliminarlo.

    @NgModule({
      declarations: [
        MyApp
      ],
      . . .
      entryComponents: [
        MyApp
      ]
    })

Ahora vamos a crear un nuevo archivo src/pages/home/home.module.ts  y le agregamos el siguiente código.

  import { NgModule } from '@angular/core';
  import { IonicPageModule } from 'ionic-angular';
  import { HomePage } from './home';

  @NgModule({
   declarations: [HomePage],
   imports: [IonicPageModule.forChild(HomePage)],
  })
  export class HomePageModule { }

Este código le dice a ionic que ahora HomePage es un modulo el cual podremos cargar cuando lo necesitemos.

Ya lo ultimo que nos queda es agregar el decorador @IonicPage a nuestro componente HomePage.ts, esto es para que ionic genere los links adecuados así como la url correspondiente para acceder a esta página.

    import { IonicPage } from 'ionic-angular';

    @IonicPage() 
    @Component( ... )

    export class HomePage { ... }

Felicidades!! ya tienes tu aplicación trabajando con Lazy loaders. Si tienes una aplicación ya avanzada una recomendación es que limpies tu app.module.ts y dejes que el Lazy Loader se encargue de traer tus páginas cuando son necesarias y de esta forma optimizar tu app.

Si tienes algún problema implementado o una forma mas sencilla de hacer este trabajo no dudes en comentar, Saludos.

Anuncios

4 comentarios sobre “Aumentar la velocidad de tu aplicación usando Lazy Loaders en Ionic 3

Agrega el tuyo

  1. Dada tu explicacion, podrias indicar el porque ionic evita esta practica para argumentar en su documentacion? creo que deberias plantear ambos contextos para diferenes casos de uso, me gustaria saber en que casos el lazy loader no es preferente… gracias por la información 🙂

    Me gusta

    1. Hola moises haré una pequeña cita que me ayudará a responder tu pregunta. Como nota adicional el equipo de Ionic saco dos tutoriales en su blog oficial de como implementar los lazy loaders.

      When we were working on release 3.0.0, our main goal was to add lazy loading to the framework and make it as easy as possible. While we are still labeling lazy loading as a beta/non-default setting

      Este es un framework que esta en constante actualización y debemos estar al corriente de los ultimos release y mantener nuestras aplicaciones actualizadas siempre que se pueda claro 🙂

      Me gusta

      1. Gracias por tu respuesta… había leído eso, y si también leí las guías sobre como implementar esta técnica… pero creo que aun no me queda claro en que casos se usa y en cuales no. seria genial pudieras plantearlo!! gracias de todas formas por la información.

        Me gusta

      2. Pienso que esta técnica deberíamos utilizarla para todas las paginas que pueda tener nuestra aplicación a fin de solo cargarlas cuando sea necesario. Que mantendría yo aun cargando a la antigua forma, algún proveedor que cargue alguna información por defecto e igual evaluaría si realmente vale la pena que el usuario espere mas tiempo, o si prefiero llevarlo rápidamente a la aplicación con alguna información que lo entretenga mientras le traigo los datos de fondo. ¿ Que opinas tu al respecto ?

        Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Un sitio web WordPress.com.

Subir ↑

A %d blogueros les gusta esto: