Vite 7 y Turbopack en 2026: Comparativa Real de Bundlers a Velocidad Extrema

# Vite 7 en 2026 — mismo config, motor nuevo
npm create vite@latest my-app -- --template react-ts
# vite.config.ts no cambia: Rolldown es drop-in para Rollup
# Pero el build pasa de 14.2s → 1.8s en proyecto de 800 módulos

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

// vite.config.ts — Vite 7 con 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 — reemplaza a Vite SSR legacy, soporta RSC sin Next.js
  environments: {
    client: { consumer: 'client' },
    ssr: { consumer: 'server' },
    edge: { consumer: 'server', resolve: { conditions: ['edge-light'] } }
  },
  build: {
    // Rolldown trae OXC minifier integrado (reemplaza esbuild minify)
    minify: 'oxc',
    // Code split automático por route con Rolldown
    rolldownOptions: {
      output: { advancedChunks: { groups: [{ name: 'vendor', test: /node_modules/ }] } }
    }
  },
  // Vitest 3 corre sobre el mismo Rolldown — 0 config duplicada
  test: {
    environment: 'jsdom',
    globals: true
  }
})

// next.config.js — Turbopack es default en Next 16 (2026)
// No hay que activar nada: `next dev` ya usa Turbopack
// Solo desactívalo si necesitas Webpack legacy (no recomendado)
/** @type {import('next').NextConfig} */
const nextConfig = {
  // experimental.turbo ya no existe — Turbopack es el default
  // Para forzar Webpack (solo si plugin incompatible):
  // webpack: (config) => config // legacy, 12x más lento
}
export default nextConfig

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

// rspack.config.js — migra Webpack cambiando 1 línea (2026)
const config = {
  // context, entry, output, module.rules: idéntico a Webpack
  // Solo cambia el import:
  // const webpack = require('webpack') → const { rspack } = require('@rspack/core')
  module: {
    rules: [{ test: /\.css$/, use: ['postcss-loader'] }] // funciona igual
  },
  plugins: [new rspack.HtmlWebpackPlugin()],
  // Añade aceleración Rust:
  experiments: { css: true }, // CSS nativo sin mini-css-extract
  optimization: { minify: true } // SWC minifier integrado
}
export default config

// Migración Webpack → Rspack en 2026 (proyecto de 600 módulos):
// 1. npm uninstall webpack webpack-cli → npm install @rspack/core @rspack/cli
// 2. Cambia `webpack` por `rspack` en package.json scripts y config
// 3. `npx rspack build` — 85% de proyectos compila sin cambios
// 4. Los 15% restantes: ajusta 2-3 loaders con API Node legacy

# De Vite 5/6 → Vite 7 (15 minutos)
npm install vite@^7 @vitejs/plugin-react@latest
# 1. Actualiza vite.config.ts: cambia `build.rollupOptions` → `build.rolldownOptions` (opcional)
# 2. Si usas @vitejs/plugin-react, actualiza a v5 (soporte Rolldown)
# 3. npm run dev — verifica "rolldown" en el log
# 4. npm run build — si algo falla, activa compat: `rolldownOptions: { compat: 'rollup' }`

# De Webpack → Vite 7 (1-2 días para app mediana)
npm install vite@^7
# 1. Crea vite.config.ts con `plugins: [react()]`, `resolve.alias` desde webpack alias
# 2. Mueve `public/` y `index.html` a raíz (Vite lo espera ahí)
# 3. Convierte `require()` a `import` (Vite es ESM puro)
# 4. Reemplaza DefinePlugin por `define: { 'process.env.X': '...'}`
# 5. Plugins: busca equivalente Vite (ej: HtmlWebpackPlugin → vite-plugin-html)

# Verifica HMR <50ms
# Abre http://localhost:5173, cambia un componente, mira el overlay: [vite] hmr update in 22ms