/igniteui-wc-optimize-bundle-size

name: igniteui-wc-optimize-bundle-size
description: Optimize application bundle size by importing only necessary components and using tree-shaking effectively
user-invocable: true

Optimize Bundle Size

This skill helps users minimize their application's bundle size when using Ignite UI Web Components by importing only the components they need and following best practices for tree-shaking.

Example Usage

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

Related Skills

• [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) - Proper integration setup
• [igniteui-wc-customize-component-theme](../igniteui-wc-customize-component-theme/SKILL.md) - Theming after optimization

When to Use

• User's 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

Key Principles

1. **Import only what you use** - Don't use `defineAllComponents()` 2. **Use named imports** - Enable tree-shaking 3. **Analyze your bundle** - Identify what's being included 4. **Lazy load when possible** - Load components on demand

Import Strategies

❌ Bad: Import Everything

// DON'T DO THIS - imports ALL components (~500KB+)
import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

**Impact:** Includes all 60+ components whether you use them or not.

✅ Good: Import Specific Components

// DO THIS - import only what you need
import {
  defineComponents,
  IgcButtonComponent,
  IgcInputComponent,
  IgcCardComponent
} from 'igniteui-webcomponents';

defineComponents(IgcButtonComponent, IgcInputComponent, IgcCardComponent);

**Impact:** Bundle includes only 3 components and their dependencies.

React Applications

If you're using React, consider using the **`igniteui-react`** package instead of `igniteui-webcomponents`. It provides the same components with React-friendly wrappers and typically results in better tree-shaking:

npm install igniteui-react

import { IgrButton, IgrInput, IgrCard } from 'igniteui-react';

// No need to call defineComponents - components register automatically
function MyComponent() {
  return (
    <div>
      <IgrButton variant="contained">Click me</IgrButton>
      <IgrInput label="Name" />
      <IgrCard>Content</IgrCard>
    </div>
  );
}

**Benefits for bundle size:**

• Automatic tree-shaking (only imported components are included)
• No need for component registration overhead
• Better integration with React build tools

For more details, see the [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md) skill.

Analyzing Your Bundle

Using Webpack Bundle Analyzer

**Installation:**

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

**Configuration (`webpack.config.js`):**

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

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

**Run analysis:**

npm run build
# Open bundle-report.html to see what's included

Using Vite Bundle Analyzer

**Installation:**

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

**Configuration (`vite.config.ts`):**

import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

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

**Run analysis:**

npm run build
# Opens stats.html automatically

Using source-map-explorer

**Installation:**

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

**Package.json:**

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

**Run:**

npm run build
npm run analyze

Audit Your Component Usage

1. Find What Components You're Actually Using

Search your codebase for component usage:

# Search for component tags in templates
grep -r "igc-" src/ --include="*.html" --include="*.tsx" --include="*.vue"

# List unique components
grep -roh "igc-[a-z-]*" src/ | sort | uniq

2. Compare with Your Imports

Check what you're importing vs what you're using:

// Find in your code
import {
  defineComponents,
  IgcButtonComponent,
  IgcInputComponent,
  IgcCardComponent,
  IgcSelectComponent,  // ← Are you using this?
  IgcComboComponent,   // ← Are you using this?
} from 'igniteui-webcomponents';

3. Remove Unused Imports

Remove components you're not using:

// Before: 5 components imported
import {
  defineComponents,
  IgcButtonComponent,
  IgcInputComponent,
  IgcCardComponent,
  IgcSelectComponent,
  IgcComboComponent,
} from 'igniteui-webcomponents';

defineComponents(
  IgcButtonComponent,
  IgcInputComponent,
  IgcCardComponent,
  IgcSelectComponent,
  IgcComboComponent
);

// After: Only 3 components needed
import {
  defineComponents,
  IgcButtonComponent,
  IgcInputComponent,
  IgcCardComponent,
} from 'igniteui-webcomponents';

defineComponents(IgcButtonComponent, IgcInputComponent, IgcCardComponent);

Lazy Loading Components

Load components only when needed to reduce initial bundle size.

Vanilla JavaScript / TypeScript

// Load immediately (increases initial bundle)
import { defineComponents, IgcDialogComponent } from 'igniteui-webcomponents';
defineComponents(IgcDialogComponent);

// Lazy load (smaller initial bundle)
async function showDialog() {
  const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents')