Otimização do Tamanho do Bundle - Analise, divida e reduza seu bundle JavaScript do cliente

// Passo 1: Instale e configure o analisador de bundle
// npm install -D @next/bundle-analyzer
 
// next.config.ts
import withBundleAnalyzer from "@next/bundle-analyzer";
 
const nextConfig = {
  // sua configuração
};
 
export default withBundleAnalyzer({
  enabled: process.env.ANALYZE === "true",
})(nextConfig);
 
// Passo 2: Analise
// ANALYZE=true npm run build
// Abre um treemap mostrando cada módulo e seu tamanho
 
// Passo 3: Importação dinâmica para componentes pesados do cliente
import dynamic from "next/dynamic";
 
const Chart = dynamic(() => import("@/components/Chart"), {
  loading: () => <div className="h-64 animate-pulse bg-gray-100 rounded" />,
  ssr: false, // Pula SSR para componentes que só funcionam no cliente
});
 
// Passo 4: Importações nomeadas para tree-shaking
import { format } from "date-fns";         // 4KB - faz tree-shake
// NÃO: import dateUtils from "date-fns";   // 72KB - importa tudo

// ---- ANTES: Bundle inchado - 487KB de JS do cliente compactado com gzip ----
 
// page.tsx - tudo carregado antecipadamente
import { Chart } from "chart.js/auto";         // +180KB compactado com gzip
import moment from "moment";                    // +72KB compactado com gzip
import _ from "lodash";                         // +71KB compactado com gzip
import { Editor } from "@monaco-editor/react";  // +120KB compactado com gzip
import { motion } from "framer-motion";         // +44KB compactado com gzip
 
export default function DashboardPage() {
  const [showEditor, setShowEditor] = useState(false);
  const [data, setData] = useState(fetchDashboardData());
 
  // lodash usado para uma função
  const sortedData = _.sortBy(data.items, "date");
  // moment usado para formatação
  const dateStr = moment(data.lastUpdated).format("MMM DD, YYYY");
 
  return (
    <div>
      <h1>Dashboard - Última atualização: {dateStr}</h1>
      <Chart data={sortedData} />
      <motion.div animate={{ opacity: 1 }}>
        <p>Conteúdo animado</p>
      </motion.div>
      {showEditor && <Editor language="json" value={JSON.stringify(data)} />}
      <button onClick={() => setShowEditor(true)}>Abrir Editor</button>
    </div>
  );
}
 
// ---- DEPOIS: Otimizado - 89KB de JS do cliente compactado com gzip (redução de 82%) ----
 
// page.tsx - Server Component por padrão (zero JS do cliente para busca de dados)
import { format } from "date-fns";  // 4KB - substitui 72KB de moment
import { DashboardClient } from "./DashboardClient";
 
export default async function DashboardPage() {
  // Busca no lado do servidor - zero JS do cliente
  const data = await fetchDashboardData();
 
  // date-fns com importação nomeada - faz tree-shake para 4KB
  const dateStr = format(data.lastUpdated, "MMM dd, yyyy");
 
  // Ordena com JS nativo - substitui 71KB de lodash
  const sortedData = [...data.items].sort(
    (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
  );
 
  return (
    <div>
      <h1>Dashboard - Última atualização: {dateStr}</h1>
      <DashboardClient sortedData={sortedData} />
    </div>
  );
}
 
// DashboardClient.tsx - Componente cliente mínimo
"use client";
 
import dynamic from "next/dynamic";
 
// Importação dinâmica: Chart carregado apenas quando visível (economiza 180KB da carga inicial)
const Chart = dynamic(() => import("@/components/Chart"), {
  loading: () => <div className="h-64 animate-pulse bg-gray-100 rounded" />,
  ssr: false,
});
 
// Importação dinâmica: Editor carregado apenas quando o usuário clica no botão (economiza 120KB)
const Editor = dynamic(() => import("@monaco-editor/react").then((m) => m.Editor), {
  loading: () => <div className="h-96 animate-pulse bg-gray-100 rounded" />,
  ssr: false,
});
 
// Animação leve - CSS em vez de framer-motion (economiza 44KB)
// Ou: import { LazyMotion, domAnimation, m } from "framer-motion"
// LazyMotion carrega apenas 5KB em vez de 44KB
 
export function DashboardClient({ sortedData }: { sortedData: DataItem[] }) {
  const [showEditor, setShowEditor] = useState(false);
 
  return (
    <>
      <Chart data={sortedData} />
      <div className="animate-fadeIn">
        <p>Conteúdo animado</p>
      </div>
      {showEditor && <Editor language="json" value={JSON.stringify(sortedData)} />}
      <button onClick={() => setShowEditor(true)}>Abrir Editor</button>
    </>
  );
}

import { lazy, Suspense } from "react";
 
const HeavyChart = lazy(() => import("./HeavyChart"));
 
function Dashboard() {
  return (
    <Suspense fallback={<div className="h-64 animate-pulse bg-gray-100" />}>
      <HeavyChart data={data} />
    </Suspense>
  );
}

"use client";
 
import dynamic from "next/dynamic";
import { useInView } from "react-intersection-observer";
 
const HeavyWidget = dynamic(() => import("@/components/HeavyWidget"), {
  ssr: false,
});
 
function LazySection() {
  const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "200px" });
 
  return (
    <div ref={ref}>
      {inView ? <HeavyWidget /> : <div className="h-96" />}
    </div>
  );
}

# Verifique o custo de qualquer pacote npm antes de adicioná-lo
npx bundle-phobia-cli lodash
# lodash: 71.5KB minificado, 25.3KB compactado com gzip
 
# Alternativa: use o site bundlephobia.com
# https://bundlephobia.com/package/lodash