Vite 7 and Turbopack in 2026: Real Bundler Comparison at Extreme Speed

# Vite 7 in 2026 — same config, new engine
npm create vite@latest my-app -- --template react-ts
# vite.config.ts doesn't change: Rolldown is drop-in for Rollup
# But build goes from 14.2s → 1.8s on 800-module project

# Verify Rolldown active:
# vite v7.0.3 (rolldown 1.0) dev server running at http://localhost:5173

// vite.config.ts — Vite 7 with Rolldown + Environment API (2026)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  // Environment API — replaces legacy Vite SSR, supports RSC without Next.js
  environments: {
    client: { consumer: 'client' },
    ssr: { consumer: 'server' },
    edge: { consumer: 'server', resolve: { conditions: ['edge-light'] } }
  },
  build: {
    // Rolldown brings integrated OXC minifier (replaces esbuild minify)
    minify: 'oxc',
    // Automatic route code split with Rolldown
    rolldownOptions: {
      output: { advancedChunks: { groups: [{ name: 'vendor', test: /node_modules/ }] } }
    }
  },
  // Vitest 3 runs on same Rolldown — 0 duplicate config
  test: {
    environment: 'jsdom',
    globals: true
  }
})

// next.config.js — Turbopack is default in Next 16 (2026)
// Nothing to enable: `next dev` already uses Turbopack
// Only disable if you need legacy Webpack (not recommended)
/** @type {import('next').NextConfig} */
const nextConfig = {
  // experimental.turbo no longer exists — Turbopack is default
  // To force Webpack (only if plugin incompatible):
  // webpack: (config) => config // legacy, 12x slower
}
export default nextConfig

// Benchmark Turbopack vs Webpack in Next.js (1200-page app):
// - dev start: 1.8s vs 8.4s (4.6x)
// - HMR: 22ms vs 280ms (12.7x)
// - Build: 38s vs 142s (3.7x)
// - Memory: 1.2GB vs 2.8GB

// rspack.config.js — migrate Webpack by changing 1 line (2026)
const config = {
  // context, entry, output, module.rules: identical to Webpack
  // Only change import:
  // const webpack = require('webpack') → const { rspack } = require('@rspack/core')
  module: {
    rules: [{ test: /\.css$/, use: ['postcss-loader'] }] // works same
  },
  plugins: [new rspack.HtmlWebpackPlugin()],
  // Add Rust acceleration:
  experiments: { css: true }, // native CSS without mini-css-extract
  optimization: { minify: true } // integrated SWC minifier
}
export default config

// Migration Webpack → Rspack in 2026 (600-module project):
// 1. npm uninstall webpack webpack-cli → npm install @rspack/core @rspack/cli
// 2. Change `webpack` to `rspack` in package.json scripts and config
// 3. `npx rspack build` — 85% projects compile unchanged
// 4. Remaining 15%: tweak 2-3 loaders with legacy Node API

# From Vite 5/6 → Vite 7 (15 minutes)
npm install vite@^7 @vitejs/plugin-react@latest
# 1. Update vite.config.ts: change `build.rollupOptions` → `build.rolldownOptions` (optional)
# 2. If you use @vitejs/plugin-react, update to v5 (Rolldown support)
# 3. npm run dev — verify "rolldown" in log
# 4. npm run build — if anything fails, enable compat: `rolldownOptions: { compat: 'rollup' }`

# From Webpack → Vite 7 (1-2 days for mid-size app)
npm install vite@^7
# 1. Create vite.config.ts with `plugins: [react()]`, `resolve.alias` from webpack alias
# 2. Move `public/` and `index.html` to root (Vite expects them there)
# 3. Convert `require()` to `import` (Vite is pure ESM)
# 4. Replace DefinePlugin with `define: { 'process.env.X': '...'}`
# 5. Plugins: find Vite equivalent (e.g. HtmlWebpackPlugin → vite-plugin-html)

# Verify HMR <50ms
# Open http://localhost:5173, change a component, watch overlay: [vite] hmr update in 22ms