0Pricing
Web Performance Optimization & Lighthouse · Aula

Divisão de Código e Carregamento Preguiçoso

Divida grandes pacotes JavaScript em partes carregadas sob demanda com importações dinâmicas e divisão por rota, para que os usuários baixem apenas o código de que realmente precisam.

Divisão de Código e Carregamento Preguiçoso é uma aula grátis de Web Performance Optimization & Lighthouse no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Performance Optimization & Lighthouse, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Performance Optimization & Lighthouse inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

The Monolithic Bundle Problem

Shipping all JavaScript in one bundle forces users to download code for pages they may never visit. Code splitting breaks the bundle into smaller chunks loaded only when needed.

Dynamic import()

The dynamic import() expression returns a promise and tells bundlers to create a separate chunk. The module loads on demand at runtime.

button.addEventListener('click', async () => {
  const { renderChart } = await import('./chart.js');
  renderChart();
});

Route-Based Splitting

The most impactful split is per route: each page becomes its own chunk, so the initial load contains only the landing route.

const Dashboard = React.lazy(() => import('./pages/Dashboard'));

Suspense Fallbacks

While a lazy chunk loads, show a fallback so the UI stays responsive. In React this is Suspense; other frameworks have equivalents.

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

Component-Level Splitting

Heavy widgets like rich text editors, maps, or charts can be split too, loading only when the user opens that feature rather than on first paint.

Vendor Splitting

Separating third-party libraries into a vendor chunk lets it cache independently. App code changes frequently; vendor code rarely does, so users re-download less.

Prefetching Chunks

Lazy loading can add a delay when the user navigates. Prefetch the chunk during idle time, for example on link hover, so it is ready before the click.

link.addEventListener('mouseenter', () => import('./pages/Settings'));

Avoiding Over-Splitting

Too many tiny chunks create request overhead and waterfalls. Aim for meaningful boundaries (routes, big features), not splitting every small function.

Tree Shaking Synergy

Code splitting pairs with tree shaking: use ES module imports and import only what you need so dead code never enters any chunk.

import { debounce } from 'lodash-es'; // only debounce is bundled

Measuring the Result

Use a bundle analyzer to inspect chunk sizes and the Coverage tab in DevTools to find unused code shipped on initial load. Lighthouse flags large unused JS.

Strategy Summary

  • Split by route first.
  • Lazy-load heavy components.
  • Separate vendor chunks for caching.
  • Prefetch likely-next chunks during idle.

Quick Check

Which JavaScript feature tells bundlers to create a separate chunk loaded on demand?

Recap

You learned to shrink initial payload with code splitting: dynamic import(), route- and component-level lazy loading, vendor chunking, idle prefetching, and tree shaking. Split at meaningful boundaries and measure with a bundle analyzer.

Perguntas Frequentes

A aula “Divisão de Código e Carregamento Preguiçoso” é grátis?

Sim — o texto completo de “Divisão de Código e Carregamento Preguiçoso” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Performance Optimization & Lighthouse, atualize para CoddyKit PRO. O curso de Web Performance Optimization & Lighthouse inclui 4 aulas no total.

O que vou aprender em “Divisão de Código e Carregamento Preguiçoso”?

Divida grandes pacotes JavaScript em partes carregadas sob demanda com importações dinâmicas e divisão por rota, para que os usuários baixem apenas o código de que realmente precisam. Você pratica Web Performance Optimization & Lighthouse com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Web Performance Optimization & Lighthouse?

Nenhuma experiência prévia é necessária. Web Performance Optimization & Lighthouse no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Divisão de Código e Carregamento Preguiçoso”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Web Performance Optimization & Lighthouse?

Sim. Cada aula de Web Performance Optimization & Lighthouse inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Redução da carga do JavaScript
  2. Estratégias eficientes de carregamento de scripts
  3. Trabalhadores da Web e execução fora da thread principal
  4. Divisão de Código e Carregamento Preguiçoso
← Voltar para Web Performance Optimization & Lighthouse