Como você carrega preguiçosamente rotas/recursos em Angular?

Question

Accepted Answer

**Lazy loading** adia o download do código de um recurso até que o usuário navegue para ele, em vez de agrupar tudo no download inicial. Isso reduz o pacote inicial e acelera o carregamento inicial do aplicativo.

## Carregamento preguiçoso de um componente independente (moderno)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

O `import()` dinâmico diz à ferramenta de construção para dividir `AdminComponent` em seu próprio bloco, baixado apenas quando o usuário visita `/admin`.

## Carregamento preguiçoso de um grupo de rotas

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` carrega preguiçosamente toda uma área de recurso (todas as suas rotas/componentes) como um único bloco — a forma padrão de dividir um grande aplicativo por recurso.

## O formulário baseado em NgModule (bases de código mais antigas)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## Por que isso importa

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

Os usuários baixam apenas o que realmente visitam — crítico para grandes aplicativos corporativos com muitas áreas de recurso, das quais a maioria um determinado usuário nunca abre.

## Estratégias de pré-carregamento (o melhor dos dois mundos)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

O pré-carregamento busca blocos preguiçosos em segundo plano após o carregamento do aplicativo, para que o pacote inicial permaneça pequeno *e* a navegação posterior se sinta instantânea. Você também pode escrever estratégias personalizadas (por exemplo, pré-carregar apenas as rotas próximas prováveis).

## Por que isso importa

O carregamento preguiçoso é a técnica principal para manter o pacote inicial do Angular pequeno à medida que o aplicativo cresce — essencial para os grandes aplicativos corporativos com vários recursos que Angular visa.

Dividir por rota/recurso (`loadComponent`/`loadChildren`) significa carregamentos iniciais mais rápidos, e quando combinado com uma estratégia de pré-carregamento, oferece tanto uma inicialização rápida quanto uma navegação rápida.

É uma prática de desempenho padrão e de alto impacto em qualquer aplicativo Angular significativo.