Code Splitting Complete Guide

# Code Splitting Complete Guide for Google Antigravity

Optimize your application bundle size with code splitting using Google Antigravity IDE.

## Dynamic Imports in Next.js

```typescript
// components/heavy-component.tsx
"use client";

import dynamic from "next/dynamic";
import { Suspense } from "react";

const HeavyChart = dynamic(() => import("./chart"), {
  loading: () => <ChartSkeleton />,
  ssr: false
});

const CodeEditor = dynamic(
  () => import("@monaco-editor/react"),
  {
    loading: () => <div className="h-[400px] bg-gray-100 animate-pulse rounded-lg" />,
    ssr: false
  }
);

// Preload on hover
const Modal = dynamic(() => import("./modal"));

function MyComponent() {
  const handleMouseEnter = () => {
    import("./modal");
  };

  return (
    <button onMouseEnter={handleMouseEnter} onClick={() => setShowModal(true)}>
      Open Modal
    </button>
  );
}
```

## Optimizing Third-Party Libraries

```typescript
// Import only what you need
// Bad - imports entire library
import _ from "lodash";

// Good - tree-shakeable import
import debounce from "lodash/debounce";

// Better - use smaller alternative
import { debounce } from "lodash-es";

// Best - native or tiny utility
function debounce<T extends (...args: any[]) => any>(fn: T, ms: number) {
  let timeoutId: NodeJS.Timeout;
  return (...args: Parameters<T>) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), ms);
  };
}
```

## Best Practices

1. **Split by route** for automatic optimization
2. **Lazy load heavy components** below the fold
3. **Preload critical chunks** on interaction hints
4. **Analyze bundle** regularly to find issues
5. **Use tree-shaking** compatible imports
6. **Set up loading states** for all lazy components
7. **Monitor Core Web Vitals** for impact

Google Antigravity helps identify code splitting opportunities and optimize bundle size.