Otimizando Code Splitting e Lazy Loading com Claude Code

A Necessidade do Code Splitting

Quando o tamanho do bundle de uma SPA cresce, o carregamento inicial fica lento. Implementando code splitting e lazy loading adequadamente, você pode carregar apenas o código necessário no momento certo. Com o Claude Code, a introdução em projetos existentes também é eficiente.

React.lazy e Suspense

import { lazy, Suspense } from "react";

// Componentes com carregamento lazy
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));
const Analytics = lazy(() => import("./pages/Analytics"));

function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center h-64">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500" />
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

Lazy Loading de Named Exports

// Caso de lazy loading de named exports
const Chart = lazy(() =>
  import("./components/Chart").then((module) => ({
    default: module.BarChart,
  }))
);

// Helper genérico
function lazyNamed<T extends Record<string, any>>(
  factory: () => Promise<T>,
  name: keyof T
) {
  return lazy(() =>
    factory().then((module) => ({ default: module[name] }))
  );
}

const PieChart = lazyNamed(
  () => import("./components/Chart"),
  "PieChart"
);

Dynamic Import do Next.js

import dynamic from "next/dynamic";

// Carregamento apenas no lado do cliente
const RichEditor = dynamic(() => import("./components/RichEditor"), {
  ssr: false,
  loading: () => <p>Carregando editor...</p>,
});

// Carregamento condicional
const AdminPanel = dynamic(() => import("./components/AdminPanel"), {
  ssr: false,
});

function Page({ isAdmin }: { isAdmin: boolean }) {
  return (
    <div>
      <h1>Conteúdo Principal</h1>
      {isAdmin && <AdminPanel />}
    </div>
  );
}

Divisão Baseada em Rotas

import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// Divisão por rota
const routes = [
  { path: "/", component: lazy(() => import("./pages/Home")) },
  { path: "/about", component: lazy(() => import("./pages/About")) },
  { path: "/blog/*", component: lazy(() => import("./pages/Blog")) },
  {
    path: "/admin/*",
    component: lazy(() => import("./pages/Admin")),
  },
];

function AppRouter() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          {routes.map(({ path, component: Component }) => (
            <Route key={path} path={path} element={<Component />} />
          ))}
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Estratégia de Prefetch

// Prefetch no hover do mouse
function PrefetchLink({
  to,
  factory,
  children,
}: {
  to: string;
  factory: () => Promise<any>;
  children: React.ReactNode;
}) {
  const handleMouseEnter = () => {
    factory(); // Iniciar prefetch
  };

  return (
    <Link to={to} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}

// Prefetch de rota
const dashboardFactory = () => import("./pages/Dashboard");
const DashboardPage = lazy(dashboardFactory);

// Uso na navegação
<PrefetchLink to="/dashboard" factory={dashboardFactory}>
  Dashboard
</PrefetchLink>

Análise de Bundle

// Configuração do webpack-bundle-analyzer
// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  // Configuração do Next.js
});

# Executar análise de bundle
ANALYZE=true npm run build

Utilizando com Claude Code

Prompt para solicitar ao Claude Code a introdução de code splitting. Para a abordagem geral de melhoria de performance, consulte Comparação SSR vs SSG, e para eficiência no desenvolvimento, consulte 10 Dicas para Triplicar sua Produtividade.

Otimize o tamanho do bundle.
- Introduza code splitting baseado em rotas
- Converta bibliotecas pesadas (chart.js, moment etc.) para lazy loading
- Unifique estados de loading com Suspense
- Analise o bundle e gere relatório de melhorias

Para detalhes sobre code splitting, consulte a documentação oficial do React. Para formas de utilizar o Claude Code, consulte a documentação oficial.

Resumo

Code splitting é uma otimização de performance que impacta diretamente a experiência do usuário. Ao solicitar ao Claude Code desde a análise de bundle até a implementação de forma consistente, você pode encontrar pontos de divisão eficazes e otimizar.