Lesson 5 of 6

Build & Optimization

You'll learn what ` run build` produces and how to inspect and tune it. Vite uses Rollup to minify, split and hash your files for production.

Bash

# Build for production
npm run build

# Output (dist/):
# dist/index.html
# dist/assets/index-a1b2c3d4.css     (hashed filename = cache-busting)
# dist/assets/index-e5f6a7b8.js      (main bundle)
# dist/assets/vendor-c9d0e1f2.js     (react + react-dom, cached separately)

# Analyze bundle size
npm install -D rollup-plugin-visualizer

# Add to vite.config.ts:
# import { visualizer } from 'rollup-plugin-visualizer'
# plugins: [react(), visualizer({ open: true })]
# Then: npm run build — opens interactive treemap in browser

# Preview production build locally
npm run preview   # serves dist/ at http://localhost:4173

// Build optimization in vite.config.ts
import { defineConfig, splitVendorChunkPlugin } from 'vite'

export default defineConfig({
  build: {
    // Target modern browsers — smaller output
    target: 'es2020',

    // Increase chunk size warning threshold (default 500kB)
    chunkSizeWarningLimit: 600,

    rollupOptions: {
      output: {
        // Manual chunk splitting — separate big libraries
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // Put React in its own chunk
            if (id.includes('react')) return 'react-vendor'
            // Put charting library in its own chunk
            if (id.includes('recharts')) return 'charts'
            // Everything else in vendor
            return 'vendor'
          }
        },
      },
    },

    // Generate .gz and .br compressed versions
    // (needs vite-plugin-compression)
    reportCompressedSize: true,
  },

  // Pre-bundle dependencies for faster dev cold start
  optimizeDeps: {
    include: ['lodash-es', 'axios'],
    exclude: ['your-esm-package'],
  },
})

// Lazy loading routes (React Router example)
import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'

const Home    = lazy(() => import('./pages/Home'))
const About   = lazy(() => import('./pages/About'))
const Dashboard = lazy(() => import('./pages/Dashboard'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/"          element={<Home />} />
        <Route path="/about"     element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  )
}

// Build optimization in vite.config.ts
import { defineConfig, splitVendorChunkPlugin } from 'vite'

export default defineConfig({
  build: {
    // Target modern browsers — smaller output
    target: 'es2020',

// Increase chunk size warning threshold (default 500kB)
    chunkSizeWarningLimit: 600,

rollupOptions: {
      output: {
        // Manual chunk splitting — separate big libraries
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // Put React in its own chunk
            if (id.includes('react')) return 'react-vendor'
            // Put charting library in its own chunk
            if (id.includes('recharts')) return 'charts'
            // Everything else in vendor
            return 'vendor'
          }
        },
      },
    },

// Generate .gz and .br compressed versions
    // (needs vite-plugin-compression)
    reportCompressedSize: true,
  },

// Pre-bundle dependencies for faster dev cold start
  optimizeDeps: {
    include: ['lodash-es', 'axios'],
    exclude: ['your-esm-package'],
  },
})

// Lazy loading routes (React Router example)
import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'

const Home    = lazy(() => import('./pages/Home'))
const About   = lazy(() => import('./pages/About'))
const Dashboard = lazy(() => import('./pages/Dashboard'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/"          element={<Home />} />
        <Route path="/about"     element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  )
}

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.