/igniteui-react-optimize-bundle-size

name: igniteui-react-optimize-bundle-size
description: This skill optimizes application bundle size when using Ignite UI for React and should be used when the bundle is too large, when setting up tree-shaking, or when lazy loading heavy components like grids and charts
user-invocable: true

Optimize Bundle Size

This skill helps users minimize their React application's bundle size when using Ignite UI for React by importing only the components they need, leveraging tree-shaking, and applying lazy loading strategies.

Example Usage

• "My bundle size is too large"
• "How do I reduce the size of igniteui-react?"
• "Import only the components I need"
• "Tree-shake unused components"
• "Optimize imports for production"
• "How do I lazy load the data grid?"

Related Skills

• [igniteui-react-components](../igniteui-react-components/SKILL.md) — Choose only the components you need and set up your React project
• [igniteui-react-customize-theme](../igniteui-react-customize-theme/SKILL.md) — Theming after optimization

When to Use

• Application bundle size is too large
• User wants to optimize for production
• User is importing more components than needed
• User asks about tree-shaking or optimization
• User wants to improve load times
• User wants to code-split heavy components like grids or charts

---

Key Principles

1. **Install only the packages you need** — don't install `igniteui-react-grids` if you only use core UI components 2. **Use named imports** — enable tree-shaking by importing specific components 3. **Lazy load heavy components** — use `React.lazy` + `Suspense` for grids, charts, and other large components 4. **Analyze your bundle** — use tools to identify what's being included

---

Granular Package Imports

Only install the packages you actually use:

| Package | Contains | Install only if you need… | |---|---|---| | `igniteui-react` | Buttons, inputs, dialogs, calendars, lists, etc. | Core UI components | | `igniteui-react` + `igniteui-grid-lite` | Lightweight grid (`IgrGridLite` from `igniteui-react/grid-lite`) | Simple tabular data (MIT, requires both packages) | | `igniteui-react-grids` | DataGrid, TreeGrid, PivotGrid, HierarchicalGrid | Advanced data grids (commercial) | | `igniteui-react-charts` | Category, Pie, Financial, Scatter charts | Charts and data visualization (commercial) | | `igniteui-react-maps` | Geographic maps | Map visualizations (commercial) | | `igniteui-react-gauges` | Radial and linear gauges | Gauge indicators (commercial) |

# Only install what you need:
npm install igniteui-react                # Core UI only
npm install igniteui-react-grids          # Only if you need advanced grids
npm install igniteui-react-charts         # Only if you need charts

---

Import Strategies

❌ Bad: Wildcard / Barrel Imports

// DON'T DO THIS — imports everything from the package
import * as IgniteUI from 'igniteui-react';

function App() {
  return <IgniteUI.IgrButton>Click</IgniteUI.IgrButton>;
}

**Impact:** Tree-shaking cannot eliminate unused components.

✅ Good: Named Imports

// DO THIS — import only what you use
import { IgrButton, IgrInput, IgrCard } from 'igniteui-react';

function App() {
  return (
    <div>
      <IgrInput label="Name" />
      <IgrButton><span>Submit</span></IgrButton>
      <IgrCard>Content</IgrCard>
    </div>
  );
}

**Impact:** Bundle includes only the three components and their dependencies. Tree-shaking removes everything else.

---

Lazy Loading with `React.lazy` + `Suspense`

Code-split heavy components behind lazy imports to reduce initial bundle size.

Lazy Loading a Single Component

import { lazy, Suspense, useState } from 'react';

// Lazy load the dialog component
const IgrDialog = lazy(() =>
  import('igniteui-react').then(module => ({ default: module.IgrDialog }))
);

function App() {
  const [showDialog, setShowDialog] = useState(false);

  return (
    <>
      <button onClick={() => setShowDialog(true)}>Open Dialog</button>
      {showDialog && (
        <Suspense fallback={<div>Loading...</div>}>
          <IgrDialog open title="Hello">
            <p>Lazy loaded dialog content</p>
          </IgrDialog>
        </Suspense>
      )}
    </>
  );
}

Lazy Loading a Heavy Page Component

This is the recommended approach for code-splitting: wrap entire page components that use heavy Ignite UI components.

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const HomePage = lazy(() => import('./pages/Home'));
const DashboardPage = lazy(() => import('./pages/Dashboard'));
const AnalyticsPage = lazy(() => import('./pages/Analytics'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/dashboard" element={<DashboardPage />} />
          <Route path="/analytics" element={<AnalyticsPage />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

// pages/Dashboard.tsx — only loaded when navigating to /dashboard
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';

export default function Dashboard() {
  return (
    <IgrGrid data={data} autoGenerate={false}>
      <IgrColumn field="name" header="Name" />
      <IgrColumn field="value" header="Value" />
    </IgrGrid>
  );
}

// pages/Analytics.tsx — only loaded when navigating to /analytics
import { IgrCategoryChart, IgrCategoryChartModule } from 'igniteui-react-charts';

IgrCategoryChartModule.register();

export default function Analytics() {
  return <IgrCategoryChart dataSource={data} width="100%" height="500px" />;
}

**Result:** The grid and chart bundles are only downloaded when the user navigates to those routes.

---

Analyzing Your Bundle

Using Vite's R