Carregamento sob demanda de módulos

O carregamento sob demanda melhora o desempenho ao carregar módulos apenas quando são necessários. Vamos explorar este importante recurso do Angular.

O que é carregamento sob demanda?

O carregamento sob demanda consiste em carregar módulos de forma assíncrona quando o usuário navega até uma rota específica, em vez de carregar todos os módulos na inicialização da aplicação.

Por que usar o carregamento sob demanda?

• Reduz o tempo de carregamento inicial
• Melhora o desempenho
• Otimiza o uso de recursos

Criando um módulo com carregamento sob demanda

Crie um módulo de funcionalidade para carregamento sob demanda usando o Angular CLI:

ng generate module admin --route admin --module app.module

Configurando rotas com carregamento sob demanda

Configure o carregamento sob demanda no seu módulo de roteamento:

{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

Testando o carregamento sob demanda

Use as ferramentas de desenvolvimento para confirmar que os módulos são carregados somente quando as rotas são ativadas. Você verá novos arquivos JS sendo carregados dinamicamente.

Estratégias de pré-carregamento

O Angular permite pré-carregar módulos com carregamento sob demanda para melhorar ainda mais a velocidade de navegação. As estratégias comuns são:

• Sem pré-carregamento (padrão)
• Pré-carregar todos os módulos

Práticas recomendadas para carregamento sob demanda

Use o carregamento sob demanda para módulos que não são necessários imediatamente na inicialização da aplicação, como painéis de administração ou páginas de configurações.

Resumo

Você aprendeu com sucesso a implementar o carregamento sob demanda para melhorar o desempenho da sua aplicação Angular. Muito bem!