igniteui-wc-optimize-bundle-size

# 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 ```typescript // 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 ```typescript // 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: ```bash npm install igniteui-react ``` ```tsx 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:** ```bash npm install --save-dev webpack-bundle-analyzer ``` **Configuration (`webpack.config.js`):** ```javascript const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); module.exports = { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false, reportFilename: 'bundle-report.html' }) ] }; ``` **Run analysis:** ```bash npm run build # Open bundle-report.html to see what's included ``` ### Using Vite Bundle Analyzer **Installation:** ```bash npm install --save-dev rollup-plugin-visualizer ``` **Configuration (`vite.config.ts`):** ```typescript import { defineConfig } from 'vite'; import { visualizer } from 'rollup-plugin-visualizer'; export default defineConfig({ plugins: [ visualizer({ open: true, gzipSize: true, brotliSize: true, }) ] }); ``` **Run analysis:** ```bash npm run build # Opens stats.html automatically ``` ### Using source-map-explorer **Installation:** ```bash npm install --save-dev source-map-explorer ``` **Package.json:** ```json { "scripts": { "analyze": "source-map-explorer 'dist/**/*.js'" } } ``` **Run:** ```bash npm run build npm run analyze ``` ## Audit Your Component Usage ### 1. Find What Components You're Actually Using Search your codebase for component usage: ```bash # 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: ```typescript // 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: ```typescript // 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 ```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'); defineComponents(IgcDialogComponent); const dialog = document.createElement('igc-dialog'); // ... use dialog } ``` ### React (using igniteui-react) ```tsx import React, { lazy, Suspense, useState } from 'react'; // Lazy load the dialog component const IgrDialog = lazy(() => import('igniteui-react').then(module => ({ default: module.IgrDialog })) ); function MyComponent() { const [showDialog, setShowDialog] = useState(false); return ( <> <button onClick={() => setShowDialog(true)}>Open Dialog</button> {showDialog && ( <Suspense fallback={<div>Loading...</div>}> <IgrDialog open> <h2>Dialog Content</h2> </IgrDialog> </Suspense> )} </> ); } ``` ### React (using web components directly) ```tsx import React, { useState } from 'react'; // Lazy load component registration const lazyLoadDialog = async () => { const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); defineComponents(IgcDialogComponent); }; function MyComponent() { const [dialogReady, setDialogReady] = useState(false); const openDialog = async () => { if (!dialogReady) { await lazyLoadDialog(); setDialogReady(true); } // Show dialog }; return ( <button onClick={openDialog}>Open Dialog</button> ); } ``` ### Vue 3 ```vue <script setup lang="ts"> import { ref } from 'vue'; const dialogReady = ref(false); async function openDialog() { if (!dialogReady.value) { const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); defineComponents(IgcDialogComponent); dialogReady.value = true; } // Show dialog } </script> <template> <button @click="openDialog">Open Dialog</button> <igc-dialog v-if="dialogReady" open> <h2>Dialog Content</h2> </igc-dialog> </template> ``` ### Angular ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-my-component', template: ` <button (click)="openDialog()">Open Dialog</button> <igc-dialog *ngIf="dialogReady" [open]="true"> <h2>Dialog Content</h2> </igc-dialog> ` }) export class MyComponent { dialogReady = false; async openDialog() { if (!this.dialogReady) { const { defineComponents, IgcDialogComponent } = await import('igniteui-webcomponents'); defineComponents(IgcDialogComponent); this.dialogReady = true; } } } ``` ## Route-Based Code Splitting Load components only for specific routes. ### React Router ```tsx import { BrowserRouter, Routes, Route } from 'react-router-dom'; import { lazy, Suspense } from 'react'; // Lazy load route components const HomePage = lazy(() => import('./pages/Home')); const DashboardPage = lazy(() => import('./pages/Dashboard')); function App() { return ( <BrowserRouter> <Suspense fallback={<div>Loading...</div>}> <Routes> <Route path="/" element={<HomePage />} /> <Route path="/dashboard" element={<DashboardPage />} /> </Routes> </Suspense> </BrowserRouter> ); } ``` **In route component (`pages/Dashboard.tsx`):** ```tsx import { IgrCard, IgrButton } from 'igniteui-react'; function Dashboard() { return ( <div> <IgrCard> <h2>Dashboard</h2> <p>Dashboard content here</p> </IgrCard> </div> ); } ``` ### Vue Router ```typescript // router/index.ts import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', component: () => import('../views/Home.vue') // Lazy load }, { path: '/dashboard', component: () => import('../views/Dashboard.vue') // Lazy load } ]; export default createRouter({ history: createWebHistory(), routes }); ``` **In route component (`views/Dashboard.vue`):** ```vue <script setup lang="ts"> import { onMounted } from 'vue'; onMounted(async () => { // Load components only for this route const { defineComponents, IgcCardComponent } = await import('igniteui-webcomponents'); defineComponents(IgcCardComponent); }); </script> ``` ### Angular ```typescript // app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} ``` ## Build Configuration Optimizations ### Vite Configuration ```typescript // vite.config.ts import { defineConfig } from 'vite'; export default defineConfig({ build: { // Enable minification minify: 'terser', terserOptions: { compress: { drop_console: true, // Remove console.logs drop_debugger: true } },