Lazy loading (carga diferida)

Lazy loading es retrasar la descarga de una parte de la aplicación, como una ruta o un componente pesado, hasta que el usuario realmente la necesita.

Sin lazy loading, el navegador descarga el código de todas las pantallas antes de mostrar la primera. Con lazy loading, el bundler divide la aplicación en chunks, y cada chunk se descarga bajo demanda con un import() dinámico. La descarga inicial se reduce a lo que necesita la primera pantalla.

Angular ofrece dos formas principales. El router puede cargar un componente o un grupo de rutas cuando el usuario navega a una ruta. Dentro de un template, un bloque @defer puede cargar parte de una vista cuando se vuelve visible, ante una interacción o con otro disparador.

Ejemplo

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/reports.component').then(m => m.ReportsComponent),
  },
];

La librería de gráficos que usa la pantalla de reportes queda en el chunk de reportes. Los usuarios que nunca abren reportes nunca la descargan.

Confusión frecuente

Se suele esperar que lazy loading haga la aplicación más pequeña. La cantidad total de código es la misma, y una parte de la descarga pasa a un momento posterior. Si el chunk de una pantalla muy usada es grande, el usuario espera al navegar. Demasiados chunks diminutos causan una cadena de solicitudes. La precarga ayuda: la aplicación descarga en segundo plano los chunks más probables después del primer render.

También es fácil romper la división por accidente. Un solo import estático de algo del área lazy, ubicado en código que se carga al inicio, devuelve ese código al bundle principal. Revisa el reporte del bundle después de los cambios.

Lazy loading y microfrontends están relacionados y son distintos. Un chunk lazy se compila y se despliega junto con su aplicación. Un remoto también se carga bajo demanda, y se compila y se despliega por separado. En microfrontends se explica esa diferencia.

Términos relacionados

• Tree shaking
• Componentes standalone
• Module Federation