Frontend Academy · Aula

Divisão de código e rotas sob demanda

Use import() dinâmico para dividir o pacote nos limites das rotas, carregue componentes React e Vue sob demanda e monitore o tamanho das partes na saída do build.

Divisão de código e rotas sob demanda é uma aula grátis de Frontend Academy 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que dividir o código?

Um pacote monolítico de JavaScript força cada visitante a baixar cada linha de código do seu aplicativo, até mesmo os recursos que nunca usa. A divisão de código separa o pacote em fragmentos carregados sob demanda.

import() dinâmico

import('./module') retorna uma Promise que é resolvida para o módulo. Os empacotadores (Vite, webpack) identificam isso e emitem um fragmento separado, carregado em tempo de execução.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — divisão no nível do componente

React.lazy(() => import('./Heavy')) cria um componente que carrega seu código somente na primeira vez que é renderizado. Envolva-o em <Suspense> para mostrar uma alternativa durante o carregamento.

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

Divisão baseada em rotas no React Router

Cada rota recebe seu próprio fragmento; os usuários baixam apenas o código das páginas que visitam.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Componentes assíncronos do Vue 3

O Vue oferece defineAsyncComponent para o mesmo padrão.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Rotas carregadas sob demanda no Vue Router

O Vue Router aceita importações dinâmicas nas definições de rotas; são emitidos fragmentos para cada rota.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Comentários especiais do webpack

Indique nomes de fragmentos e o comportamento de pré-carregamento por meio dos 'comentários especiais' do webpack dentro da instrução de importação.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Pré-busca versus pré-carregamento

prefetch: baixe o fragmento durante o tempo ocioso, para navegações provavelmente seguintes. preload: baixe agora, com alta prioridade, para os fragmentos críticos da rota atual. Use prefetch ao passar o cursor sobre um link e preload para necessidades iminentes conhecidas.

Analisador de pacotes

Use rollup-plugin-visualizer (Vite) ou webpack-bundle-analyzer para visualizar os tamanhos dos fragmentos. Procure por: fragmentos grandes demais, dependências duplicadas e bibliotecas que você se esqueceu de eliminar da árvore de dependências.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

Divisão de fragmentos de dependências

Separe as bibliotecas de terceiros em um fragmento de dependências que muda com menos frequência do que o código do aplicativo; assim, os navegadores podem mantê-lo em cache entre implantações.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

Quando NÃO dividir

Fragmentos pequenos (com menos de 20 KB) causam mais prejuízo do que benefício: a sobrecarga do HTTP supera a economia no pacote. Não divida cada componente; divida nos limites das rotas e ao redor de recursos realmente pesados.

Verificação rápida

Com o que o invólucro lazy() do React precisa ser combinado para renderizar corretamente?

Recapitulação: divisão de código

import() dinâmico emite fragmentos separados. Use React.lazy + Suspense para dividir componentes. Use componentes de rota carregados sob demanda no React Router/Vue Router. Use prefetch para fragmentos provavelmente necessários em seguida e preload para os críticos. O analisador de pacotes revela desperdícios. Separe bibliotecas de dependências para melhorar o armazenamento em cache. Evite microfragmentos com menos de 20 KB.

Perguntas Frequentes

A aula “Divisão de código e rotas sob demanda” é grátis?

Sim — o texto completo de “Divisão de código e rotas sob demanda” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Divisão de código e rotas sob demanda”?

Use import() dinâmico para dividir o pacote nos limites das rotas, carregue componentes React e Vue sob demanda e monitore o tamanho das partes na saída do build. Você pratica Frontend Academy 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy 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 rotas sob demanda”?

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 Frontend Academy?

Sim. Cada aula de Frontend Academy 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

Principais métricas da Web: LCP FID CLS
Auditorias e pontuação do Lighthouse
Otimização de imagens: carregamento tardio e formatos WebP
Divisão de código e rotas sob demanda

← Voltar para Frontend Academy