Will this actually make my app faster?

Probably not. Migration makes your builds faster, not your app. You'll get: - Dev server starts instantly instead of taking 30 seconds - Hot reload that actually works - Builds that don't timeout your CI You might get: - Smaller bundles if you delete unused dependencies - Better performance if you fix your slow components - Faster loading if you optimize images I spent 2 weeks migrating a client's app expecting to be the fucking hero. Demo day comes: "It loads the same speed as before." Because I moved like 3MB+ of bloated code to a slightly faster build tool. Stakeholders were not impressed.

Components are still slow after migration

Build tools don't fix bad React code. Your slow components are still slow. Common issues: - Everything re-renders on every state change (use `useMemo`) - API calls in render functions (move to `useEffect`) - Everything in one giant state object - 500-line components that should be split up Migrated a dashboard that had multi-second click-to-response times. Every click re-rendered a shitload of components because some genius put user state, theme state, and navigation state in one giant context at the root level. Install React DevTools Profiler and prepare to question all your life choices. Watched dozens of components re-render when someone typed one letter in a search box. React doesn't suck - your architecture does.

When should I optimize - during or after migration?

During. You're already breaking all your imports anyway. Do it in order: 1. Get the migration working 2. Make sure nothing broke 3. Delete unused dependencies 4. Optimize imports and bundle size

Bundle is still huge after migration

You probably still have: - All of lodash for one debounce function - Multiple versions of the same dependencies - IE11 polyfills you don't need - Three different date libraries from old experiments Run `npx webpack-bundle-analyzer build/static/js/*.js` to see what's bloating it.

How do I know if migration helped?

Before: ```bash ls -lah build/static/js/ npx lighthouse [your-dev-server-url] --view ``` After: ```bash ls -lah dist/assets/ # Vite npx lighthouse [your-vite-preview-url] --view ``` Focus on LCP, FID, CLS scores, not just bundle size.

What dependencies should I replace?

Replace these during migration: - `moment.js` → `date-fns` or native JS (saves ~280KB) - Full `lodash` → selective imports or native methods - Font Awesome everything → just the icons you use - UI libraries → selective imports Don't go fucking insane like I did. Spent way too many hours replacing Material-UI with some "lightweight" alternative to save a tiny bit of space, broke half our forms, spent even more time fixing them, and ended up with a bundle barely smaller but way harder to maintain. Sometimes bloat is worth your sanity.

Core Web Vitals got worse after migration

Common issues: - Forgot to preload fonts/images (CRA did this automatically) - Font loading changed, text jumps around - JavaScript loads in different order, blocks main thread Fix: ```html ```

Dev server still slow after migration

Check: - Disable source maps if you don't need them - Too many files in `src/` - Old Node.js version (use 18+) - Antivirus scanning node_modules

API calls slower after migration

This one's a classic gotcha: - Proxy config changed (Vite uses different syntax than webpack's proxy) - CORS errors everywhere because dev server changed ports - Environment variables broke (`REACT_APP_API_URL` → `VITE_API_URL`) - Hot reload cancels in-flight requests and doesn't retry them Spent hours wondering why my API calls were returning undefined. Turns out I forgot to update the env var names.

Currently viewing the AI version

Switch to human version

CRA to Vite Migration: Performance Optimization Guide

Critical Reality Check

Migration Outcome: Build tool switches improve development experience but don't fix runtime performance issues. Typical migration reduces bundle size by ~3% (3.2MB → 3.1MB) while maintaining identical loading performance.

Time Investment: 2-3 weeks for migration + optimization. Migration alone: worthless for user experience.

Performance Baselines & Thresholds

Critical Metrics (User-Facing Impact)

LCP (Largest Contentful Paint): Target <2.5s (broken implementations: 4+ seconds)
FID (First Input Delay): Target <100ms (broken: multi-second response times)
CLS (Cumulative Layout Shift): Target <0.1 (broken: text jumping during font loading)

Development Experience Improvements

Dev server startup: CRA 35s → Vite <1s
Build time: CRA 45s → Vite 8s
Hot reload: CRA sluggish → Vite <500ms

Pre-Migration Analysis (Critical)

Bundle Analysis Commands

# Identify actual performance killers
npm run build
ls -lah build/static/js/ | sort -k5 -hr
npm install --save-dev webpack-bundle-analyzer
npx webpack-bundle-analyzer build/static/js/*.js

Performance Audit

npm install --save-dev lighthouse
npx lighthouse [your-dev-server-url] --view
# Test on slow connections: Chrome DevTools → Network → "Slow 3G"

Dependency Cleanup

npm install --save-dev depcheck
npx depcheck

Common Performance Killers (With Sizes)

Dependencies to Remove Immediately

moment.js: ~300KB for date formatting (replace with native Intl.DateTimeFormat)
Complete lodash imports: Most functions now have better native alternatives
Full UI library imports: Loading entire Material-UI for 2 buttons
IE11 polyfills: Microsoft killed IE11, remove all polyfills
Unused PDF libraries: Often 60MB+ forgotten experimental dependencies
Multiple icon libraries: Thousands of icons for handful actually used

Import Optimization

// Performance killer
import { Button } from '@mui/material';

// Optimized
import Button from '@mui/material/Button';

// Lazy loading for route components
const Dashboard = lazy(() => import('./Dashboard'));

Migration Performance Comparison

Tool	Bundle Size Change	Build Speed	Dev Server	Runtime Performance	Reality Check
CRA → Vite	~3.2MB → 3.1MB	45s → 8s	35s → <1s	Identical LCP	Great dev experience, same user experience
CRA → Next.js	~3.2MB → 4MB+	45s → 20s+	35s → few seconds	Better LCP, hydration complexity	Over-engineering for most apps
CRA → Parcel	~3.2MB → 3MB	45s → 18s	35s → 3s	No improvement	Dead ecosystem
CRA → Webpack 5	Identical	45s → 42s	35s → 34s	Identical	Time waste

Vite Configuration for Performance

Bundle Analysis Setup

// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [
    process.env.ANALYZE && visualizer({ 
      filename: 'dist/stats.html',
      open: true 
    })
  ],
  build: {
    target: 'es2020',
    chunkSizeWarningLimit: 1000,
  }
};

Resource Loading Optimization

<!-- Critical resource preloading -->
<head>
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/hero.webp" as="image">
  <link rel="dns-prefetch" href="//api.yoursite.com">
</head>

Performance Issues Exposed After Migration

Memory Leaks (Fast Dev Server Reveals Issues)

// Common leak - missing cleanup
useEffect(() => {
  const interval = setInterval(fetchData, 1000);
  // Missing: return () => clearInterval(interval);
}, []);

// Fixed version
useEffect(() => {
  const interval = setInterval(fetchData, 1000);
  return () => clearInterval(interval);
}, []);

State Management Issues

Problem: Giant context re-rendering entire app on any state change
Solution: Split contexts or use Zustand for selective subscriptions

// Performance killer
const AppContext = createContext();

// Optimized
const UserContext = createContext();
const ThemeContext = createContext();

// Or use Zustand
import { create } from 'zustand';
const useStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user })
}));

Common Migration Failures

Bundle Size Stays Large

Root Causes:

27+ unused dependencies still installed (average from depcheck analysis)
Multiple versions of same libraries
Legacy polyfills for dropped browser support
Complete library imports instead of tree-shaking

Core Web Vitals Regression

Common Issues:

Font preloading removed during migration (causes layout shift)
JavaScript loading order changed (blocks main thread)
Image optimization disabled

Fixes:

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

API Performance Degradation

Migration Gotchas:

Proxy configuration syntax changes (Vite vs webpack)
Environment variable naming (REACT_APP_ → VITE_)
CORS errors from port changes
Hot reload canceling in-flight requests

Automated Performance Testing

Lighthouse CI Setup

npm install --save-dev @lhci/cli

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:4173']
    },
    assert: {
      assertions: {
        'categories:performance': ['error', {minScore: 0.8}]
      }
    }
  }
};

Real User Monitoring

import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  // Critical: track real user experience
  console.log(metric.name, metric.value);
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Performance Budget Enforcement

// vite.config.js - Prevent size regression
export default {
  build: {
    chunkSizeWarningLimit: 1000, // 1MB warning
  }
};

// package.json - Automated size checking
{
  "bundlesize": [
    {
      "path": "./dist/assets/*.js",
      "maxSize": "250 kB",
      "compression": "gzip"
    }
  ]
}

Essential Tools for Migration Success

Analysis Tools

webpack-bundle-analyzer: Identifies forgotten dependencies (found 27 unused packages in typical audit)
vite-bundle-analyzer: Only reliable analyzer for Vite builds
depcheck: Finds unused dependencies for cleanup
Lighthouse CI: Prevents performance regressions

Performance Monitoring

Web Vitals Extension: Real-time Core Web Vitals tracking
React DevTools Profiler: Identifies component re-render issues
PageSpeed Insights: Free performance testing with recommendations

Optimization Libraries

date-fns: Tree-shakable date library (replaces moment.js)
React-Window: Virtualizes large lists (prevents browser crashes)
Zustand: Lightweight state management (avoids Context re-render issues)
React Query: Server state management (reduces redundant API calls)

Migration Success Criteria

Before/After Comparison Commands

# Before migration
ls -lah build/static/js/
npx lighthouse [your-dev-server-url] --view

# After migration
ls -lah dist/assets/
npx lighthouse [your-vite-preview-url] --view

Success Metrics

Bundle size reduction: 15%+ meaningful, <5% negligible
LCP improvement: Target <2.5s, <2s excellent
Build time: <5 minutes for production builds
Dev server startup: <5 seconds
Hot reload: <500ms

Failure Indicators

Same LCP after 3+ weeks of work
Bundle size identical or larger
New memory leaks in production
API calls slower than before migration
Core Web Vitals scores decreased

Performance Decay Prevention

Reality: Performance gains decay without monitoring. Teams add dependencies, upload massive images, write inefficient components.

Solution: Continuous monitoring with tools like SpeedCurve, Calibre, or WebPageTest. Set up automated alerts for performance budget violations.

Time Frame: Expect performance to degrade within 3-6 months without active monitoring and enforcement.

Useful Links for Further Investigation

Tools That Actually Help

Link	Description
webpack-bundle-analyzer	Found way too many forgotten dependencies with this tool, including some massive PDF library we never used. Made me question my career choices.
vite-bundle-analyzer	Only bundle analyzer that works with Vite without shitting itself. The others crash or show empty charts.
source-map-explorer	When all the fancy tools are broken (which is often), this ugly bastard still works reliably.
Lighthouse CI	Set this up after pushing a regression that killed performance badly and nobody noticed for weeks. Never again.
Web Vitals Extension	Shows real-time Core Web Vitals. Watching your \"optimizations\" make LCP go from 2s to 4.5s is soul-crushing but necessary.
Vite Performance Guide	Actually useful official docs. Most guides are generic - this one is Vite-specific.
Next.js Caching Guide	Caching is confusing. This helped me not break everything.
Rollup Options	Vite uses Rollup. Understanding this saved me from bad chunk splitting.
React DevTools Profiler	Watching 67 components re-render when someone types one letter in a search box was a religious experience. Not a good one.
React-Window	Made a huge table go from \"browser crashes\" to \"actually usable.\" Brian Vaughn is a saint.
Next.js Image Optimization	Just works. WebP conversion, responsive sizing, lazy loading - all automatic.
Vite Image Plugin	Set up once, never think about image optimization again.
Zustand	Finally, state management that doesn't make you want to quit React. Lighter than Redux, less painful than Context.
React Query	Handles server state without the clusterfuck of useEffect chains. Cuts way down on redundant API calls automatically.
PageSpeed Insights	Free testing with actual recommendations.
LCP Guide	Official guide from web.dev explaining how to optimize Largest Contentful Paint (LCP) for better web performance.
FID Guide	Official guide from web.dev explaining how to optimize First Input Delay (FID) for better user interaction.
CLS Guide	Official guide from web.dev explaining how to optimize Cumulative Layout Shift (CLS) for visual stability.
CRA to Vite	Official guide for migrating projects from Create React App (CRA) to Vite, providing helpful steps and considerations.
CRA to Next.js	Comprehensive guide for migrating projects from Create React App (CRA) to Next.js, detailing complex steps and considerations.

CRA to Vite Migration: Performance Optimization Guide

Critical Reality Check

Performance Baselines & Thresholds

Critical Metrics (User-Facing Impact)

Development Experience Improvements

Pre-Migration Analysis (Critical)

Bundle Analysis Commands

Performance Audit

Dependency Cleanup

Common Performance Killers (With Sizes)

Dependencies to Remove Immediately

Import Optimization

Migration Performance Comparison

Vite Configuration for Performance

Bundle Analysis Setup

Resource Loading Optimization

Performance Issues Exposed After Migration

Memory Leaks (Fast Dev Server Reveals Issues)

State Management Issues

Common Migration Failures

Bundle Size Stays Large

Core Web Vitals Regression

API Performance Degradation

Automated Performance Testing

Lighthouse CI Setup

Real User Monitoring

Performance Budget Enforcement

Essential Tools for Migration Success

Analysis Tools

Performance Monitoring

Optimization Libraries

Migration Success Criteria

Before/After Comparison Commands

Success Metrics

Failure Indicators

Performance Decay Prevention

Useful Links for Further Investigation

Tools That Actually Help

Related Tools & Recommendations

Vite vs Webpack vs Turbopack vs esbuild vs Rollup - Which Build Tool Won't Make You Hate Life

Migrating CRA Tests from Jest to Vitest

Which Static Site Generator Won't Make You Hate Your Life

Converting Angular to React: What Actually Happens When You Migrate

Vite + React 19 + TypeScript + ESLint 9: Actually Fast Development (When It Works)

SvelteKit Authentication Troubleshooting - Fix Session Persistence, Race Conditions, and Production Failures

SvelteKit + TypeScript + Tailwind: What I Learned Building 3 Production Apps

Fast React Alternatives That Don't Suck

Stripe Terminal React Native Production Integration Guide

Should You Use TypeScript? Here's What It Actually Costs

Supabase + Next.js + Stripe: How to Actually Make This Work

TypeScript - JavaScript That Catches Your Bugs

JavaScript to TypeScript Migration - Practical Troubleshooting Guide

SvelteKit - Web Apps That Actually Load Fast

Stop Stripe from Destroying Your Serverless Performance

Which JavaScript Runtime Won't Make You Hate Your Life

Fix Astro Production Deployment Nightmares

Astro - Static Sites That Don't Suck

Actually Migrating Away From Gatsby in 2025

Why My Gatsby Site Takes 47 Minutes to Build