Bundle Size Optimization - Analyze, split, and shrink your client JavaScript bundle

// Step 1: Install and configure bundle analyzer
// npm install -D @next/bundle-analyzer
 
// next.config.ts
import withBundleAnalyzer from "@next/bundle-analyzer";
 
const nextConfig = {
  // your config
};
 
export default withBundleAnalyzer({
  enabled: process.env.ANALYZE === "true",
})(nextConfig);
 
// Step 2: Analyze
// ANALYZE=true npm run build
// Opens treemap showing every module and its size
 
// Step 3: Dynamic import for heavy client components
import dynamic from "next/dynamic";
 
const Chart = dynamic(() => import("@/components/Chart"), {
  loading: () => <div className="h-64 animate-pulse bg-gray-100 rounded" />,
  ssr: false, // Skip SSR for client-only components
});
 
// Step 4: Named imports for tree-shaking
import { format } from "date-fns";         // 4KB - tree-shakes
// NOT: import dateUtils from "date-fns";   // 72KB - imports everything

// ---- BEFORE: Bloated bundle - 487KB gzipped client JS ----
 
// page.tsx - everything loaded eagerly
import { Chart } from "chart.js/auto";         // +180KB gzipped
import moment from "moment";                    // +72KB gzipped
import _ from "lodash";                         // +71KB gzipped
import { Editor } from "@monaco-editor/react";  // +120KB gzipped
import { motion } from "framer-motion";         // +44KB gzipped
 
export default function DashboardPage() {
  const [showEditor, setShowEditor] = useState(false);
  const [data, setData] = useState(fetchDashboardData());
 
  // lodash used for one function
  const sortedData = _.sortBy(data.items, "date");
  // moment used for formatting
  const dateStr = moment(data.lastUpdated).format("MMM DD, YYYY");
 
  return (
    <div>
      <h1>Dashboard - Last updated: {dateStr}</h1>
      <Chart data={sortedData} />
      <motion.div animate={{ opacity: 1 }}>
        <p>Animated content</p>
      </motion.div>
      {showEditor && <Editor language="json" value={JSON.stringify(data)} />}
      <button onClick={() => setShowEditor(true)}>Open Editor</button>
    </div>
  );
}
 
// ---- AFTER: Optimized - 89KB gzipped client JS (82% reduction) ----
 
// page.tsx - Server Component by default (zero client JS for data fetching)
import { format } from "date-fns";  // 4KB - replaces 72KB moment
import { DashboardClient } from "./DashboardClient";
 
export default async function DashboardPage() {
  // Server-side fetch - zero client JS
  const data = await fetchDashboardData();
 
  // date-fns with named import - tree-shakes to 4KB
  const dateStr = format(data.lastUpdated, "MMM dd, yyyy");
 
  // Sort with native JS - replaces 71KB lodash
  const sortedData = [...data.items].sort(
    (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
  );
 
  return (
    <div>
      <h1>Dashboard - Last updated: {dateStr}</h1>
      <DashboardClient sortedData={sortedData} />
    </div>
  );
}
 
// DashboardClient.tsx - Minimal client component
"use client";
 
import dynamic from "next/dynamic";
 
// Dynamic import: Chart loaded only when visible (saves 180KB from initial load)
const Chart = dynamic(() => import("@/components/Chart"), {
  loading: () => <div className="h-64 animate-pulse bg-gray-100 rounded" />,
  ssr: false,
});
 
// Dynamic import: Editor loaded only when user clicks button (saves 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,
});
 
// Lightweight animation - CSS instead of framer-motion (saves 44KB)
// Or: import { LazyMotion, domAnimation, m } from "framer-motion"
// LazyMotion loads only 5KB instead of 44KB
 
export function DashboardClient({ sortedData }: { sortedData: DataItem[] }) {
  const [showEditor, setShowEditor] = useState(false);
 
  return (
    <>
      <Chart data={sortedData} />
      <div className="animate-fadeIn">
        <p>Animated content</p>
      </div>
      {showEditor && <Editor language="json" value={JSON.stringify(sortedData)} />}
      <button onClick={() => setShowEditor(true)}>Open 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>
  );
}

# Check the cost of any npm package before adding it
npx bundle-phobia-cli lodash
# lodash: 71.5KB minified, 25.3KB gzipped
 
# Alternative: use the bundlephobia.com website
# https://bundlephobia.com/package/lodash