kalilurrahman/kr-claudiator-skills/code-splitting

// App.tsx
import React, { Suspense, lazy } from "react";
import { Routes, Route } from "react-router-dom";
import { LoadingSpinner } from "./components/LoadingSpinner";
// Each route loaded only when navigated to
const Dashboard    = lazy(() => import("./pages/Dashboard"));
const Orders       = lazy(() => import("./pages/Orders"));
const Analytics    = lazy(() => import("./pages/Analytics"));
const Settings     = lazy(() => import("./pages/Settings"));
// Heavy editor — loaded only when used
const RichTextEditor = lazy(() =>
  import("./components/RichTextEditor").then(m => ({ default: m.RichTextEditor }))
);
export function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/"           element={<Dashboard />} />
        <Route path="/orders/*"   element={<Orders />} />
        <Route path="/analytics"  element={<Analytics />} />
        <Route path="/settings"   element={<Settings />} />
      </Routes>
    </Suspense>
  );
}
// Preload on hover — load before user clicks
function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  const preload = () => {
    // Trigger the lazy import to start loading
    if (to === "/analytics") import("./pages/Analytics");
    if (to === "/orders")    import("./pages/Orders");
  };
  return (
    <Link to={to} onMouseEnter={preload} onFocus={preload}>
      {children}
    </Link>
  );
}

# Vite — visualise bundle
npm install -D rollup-plugin-visualizer
# vite.config.ts:
# plugins: [visualizer({ open: true, gzipSize: true })]
vite build
 
# Webpack Bundle Analyzer
npm install -D webpack-bundle-analyzer
# webpack.config.js: plugins: [new BundleAnalyzerPlugin()]
webpack --analyze
 
# What to look for:
# 1. Large vendor chunks (chart.js, moment.js, lodash)
# 2. Duplicated dependencies (same library, multiple versions)
# 3. Unexpectedly large page chunks

// Don't import chart libraries at the top of the file
// BAD:
import { Chart } from "chart.js";
import "chart.js/auto";
// GOOD: Load only when the chart is needed
async function renderChart(canvas: HTMLCanvasElement, data: ChartData) {
  const { Chart } = await import("chart.js/auto");
  return new Chart(canvas, { type: "bar", data });
}
// React hook for lazy-loaded feature
function useChartJs() {
  const [ChartJs, setChartJs] = React.useState<typeof import("chart.js") | null>(null);
  React.useEffect(() => {
    import("chart.js/auto").then(setChartJs);
  }, []);
  return ChartJs;
}

// bundlesize.config.js
module.exports = {
  files: [
    { path: "dist/assets/index-*.js",      maxSize: "150kb" },
    { path: "dist/assets/vendor-*.js",     maxSize: "200kb" },
    { path: "dist/assets/Dashboard-*.js",  maxSize: "80kb"  },
    { path: "dist/assets/Analytics-*.js",  maxSize: "120kb" },
  ],
};
// Run: bundlesize — fails CI if any chunk exceeds limit