Igniteui React Optimize Bundle Size

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 — Choose only the components you need and set up your React project
• igniteui-react-customize-theme — 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:

# 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 => 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 Rollup Visualizer

npm install --save-dev rollup-plugin-visualizer

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
    })
  ]
});

npm run build
# Opens stats.html automatically — inspect which igniteui-react modules are included

Using Webpack Bundle Analyzer

npm install --save-dev webpack-bundle-analyzer

// webpack.config.js (or CRA with react-app-rewired)
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
      reportFilename: 'bundle-report.html'
    })
  ]
};

Using source-map-explorer

npm install --save-dev source-map-explorer

{
  "scripts": {
    "analyze": "source-map-explorer 'dist/**/*.js'"
  }
}

npm run build
npm run analyze

What to look for: Check if igniteui-react-grids or igniteui-react-charts appear in the initial bundle even though they're only used on specific routes.

Audit Your Component Usage

1. Find What Components You're Actually Using

# Search for Igr component usage in your source files
grep -roh "Igr[A-Z][a-zA-Z]*" src/ --include="*.tsx" --include="*.ts" | sort | uniq

# Example output:
# IgrButton
# IgrCard
# IgrInput

2. Compare with Your Imports

# Find all import statements from igniteui-react packages
grep -r "from 'igniteui-react" src/ --include="*.tsx" --include="*.ts"

3. Remove Unused Imports

// Before: 5 components imported
import { IgrButton, IgrInput, IgrCard, IgrSelect, IgrCombo } from 'igniteui-react';

// After audit: only 3 are actually used in JSX
import { IgrButton, IgrInput, IgrCard } from 'igniteui-react';

Build Configuration Optimizations

Vite Configuration

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        manualChunks: {
          'igniteui-core': ['igniteui-react'],
          // Only include if you use these packages:
          // 'igniteui-grids': ['igniteui-react-grids'],
          // 'igniteui-charts': ['igniteui-react-charts'],
        }
      }
    },
    chunkSizeWarningLimit: 600,
  },
  optimizeDeps: {
    include: ['igniteui-react']
  }
});

Webpack Configuration

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        igniteui: {
          test: /[\\/]node_modules[\\/]igniteui-react[\\/]/,
          name: 'igniteui',
          priority: 20,
        },
        igniteuiGrids: {
          test: /[\\/]node_modules[\\/]igniteui-react-grids[\\/]/,
          name: 'igniteui-grids',
          priority: 20,
        }
      }
    },
    minimize: true,
  },
  mode: 'production',
};

Best Practices Checklist

• Install only the packages you need — don't install igniteui-react-grids if you only use buttons and inputs
• Use named imports — import { IgrButton } from 'igniteui-react', not import * as
• Don't import from igniteui-webcomponents directly — use the igniteui-react wrappers
• Lazy load heavy components — use React.lazy + Suspense for grids, charts, and dialogs
• Split by routes — load component-heavy pages only when navigated to
• Audit your imports regularly — remove unused components
• Analyze your bundle — use bundle analyzer tools to verify tree-shaking is working
• Minify in production — ensure build tool minification is enabled
• Use compression — enable gzip/brotli on your server

Common Issues & Solutions

Issue: Bundle still large after using named imports

Investigate:

1. Check if you're importing from igniteui-webcomponents instead of igniteui-react
2. Verify tree-shaking is working (check build output with a bundle analyzer)
3. Look for barrel imports (import * as)
4. Check if large packages like igniteui-react-grids are in the initial bundle instead of being lazy loaded

Issue: Lazy loaded component flashes or shows fallback too long

Solution: Preload the component on hover or route prefetch:

const DashboardPage = lazy(() => import('./pages/Dashboard'));

// Preload on hover
function NavLink() {
  const preload = () => { import('./pages/Dashboard'); };
  return <a href="/dashboard"
}

Issue: Tree-shaking not working

Cause: Using require() instead of import, or a build tool that doesn't support ES module tree-shaking.

Solution: Ensure your project uses ES modules:

// tsconfig.json
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler"
  }
}

Expected Results

After optimization, you should see:

• Initial load time reduced by 40–60%
• Bundle size reduced by 50–80% (compared to importing everything)
• Better Core Web Vitals scores
• Faster time to interactive
• Lower bandwidth usage for users

Additional Resources

• Vite Build Optimizations
• React.lazy Documentation
• Webpack Tree Shaking
• Web Performance Optimization
• Bundle Size Analysis Tools