O Que É Lazy Loading? Adiar Trabalho Até Ser Necessário
Lazy loading adia a busca de um recurso, como um chunk de código, imagem ou componente, até o momento em que ele é realmente necessário.
Carregar tudo de antemão é um desperdício quando os usuários veem apenas parte de uma página. O lazy loading adia o trabalho até que ele importe, de modo que o carregamento inicial permaneça rápido e recursos não utilizados nunca sejam buscados. Ele se aplica ao JavaScript via code splitting, às imagens via suporte nativo do navegador e aos dados via busca sob demanda. O build prepara as partes divisíveis das quais o lazy loading depende.
Lazy loading de código
Um import dinâmico permite que uma rota ou componente carregue apenas quando usado. O bundler o transforma em um chunk separado buscado sob demanda, de modo que visitar uma página raramente usada não custa nada até que alguém vá até lá.
Lazy loading de imagens
O atributo loading="lazy" permite que o navegador adie imagens fora da tela até que o usuário role para perto delas. Isso reduz a largura de banda inicial e melhora as métricas de carregamento sem qualquer JavaScript.
Os benefícios
- Download inicial menor e first paint mais rápido.
- Recursos de conteúdo não visto nunca são buscados.
- Menor largura de banda e custo de CDN.
Projetando para a espera
Como um recurso lazy chega após um gatilho, você precisa lidar com o intervalo usando placeholders de carregamento ou skeletons. Fazer prefetch de chunks provavelmente necessários durante o tempo ocioso esconde o atraso nos caminhos comuns.
Lazy loading no CI/CD
O carregamento lazy de código depende de o build produzir chunks separados, então o pipeline emite e envia cada chunk carregado de forma lazy com content hash para cache. Uma etapa de análise de bundle no CI pode confirmar que features pesadas realmente foram parar em seus próprios chunks em vez do bundle principal.
Principais conclusões
- Lazy loading adia código, imagens ou dados até que sejam necessários.
- Ele depende de chunks divisíveis e do lazy loading nativo de imagens do navegador.
- Uma análise de bundle no CI confirma que features pesadas ficaram fora do bundle inicial.