0Pricing
Frontend Academy · Lección

Vite: servidor de desarrollo y build

Inicie un proyecto de Vite, use su servidor de desarrollo HMR instantáneo, ejecute el comando de build y previsualice el resultado de producción.

Vite: servidor de desarrollo y build es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es Vite?

Vite es una herramienta de compilación frontend de próxima generación creada por Evan You (creador de Vue). Proporciona un servidor de desarrollo extremadamente rápido mediante ESM nativo y esbuild, además de una compilación de producción basada en Rollup.

Crear un proyecto de Vite

npm create vite@latest genera la estructura inicial de un proyecto nuevo. Elija su framework (Vanilla, React, Vue, Svelte, Preact, Lit) y su variante (JS o TS). Estará listo al instante, sin necesidad de configuración.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

El servidor de desarrollo — inicio instantáneo

Vite no genera un bundle durante el desarrollo. Sirve cada archivo como un módulo ESM nativo. El navegador los importa directamente. Sin bundling, el arranque en frío tarda menos de 100 ms independientemente del tamaño del proyecto. Con HMR, solo se vuelven a compilar los archivos modificados.

HMR — reemplazo de módulos en caliente

El HMR de Vite reemplaza únicamente el módulo modificado en la aplicación en ejecución, sin recargar toda la página. En React, con @vitejs/plugin-react, el estado de los componentes se conserva durante el HMR. Los cambios aparecen en menos de 50 ms.

vite.config.js / vite.config.ts

Vite se configura mediante un archivo vite.config.ts. Entre las opciones habituales se incluyen los plugins, los alias de resolve, el puerto del servidor, el proxy para las llamadas a la API y el directorio de salida de la compilación.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

Variables de entorno

Vite expone las variables de entorno con el prefijo VITE_ mediante import.meta.env. Guárdelas en .env, .env.development y .env.production. Nunca use el prefijo VITE_ para secretos: se incluyen en el bundle del navegador.

# .env
VITE_API_URL=https://api.example.com

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — compilación de producción

npm run build ejecuta Rollup internamente para generar el bundle, minificarlo y aplicar tree shaking a la aplicación. La salida se guarda en la carpeta dist/, lista para el despliegue.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

Analizar el bundle

Use vite-bundle-visualizer o rollup-plugin-visualizer para generar un treemap del contenido del bundle. Esto ayuda a identificar dependencias demasiado grandes y oportunidades para la carga diferida.

npm run preview

npm run preview sirve localmente la compilación de producción de dist/. Úselo para verificar la compilación de producción antes de desplegarla; detecta problemas que solo aparecen cuando la aplicación no está en modo de desarrollo.

División de código en Vite

Las instrucciones dinámicas import() crean automáticamente chunks independientes. Las rutas diferidas de React Router y defineAsyncComponent de Vue también activan la división. Compruebe el tamaño de los chunks en la salida de la compilación.

Vite para bibliotecas

El modo de biblioteca de Vite (build.lib) compila bibliotecas npm y genera formatos ESM y CJS. Especifique una lista de dependencias externas para evitar incluir en el bundle dependencias peer como React.

Comprobación rápida

¿Por qué el servidor de desarrollo de Vite es más rápido que el de webpack?

Resumen: Vite

npm create vite@latest genera la estructura inicial al instante. El servidor de desarrollo usa ESM nativo: no hay bundling y el HMR es instantáneo. vite.config.ts sirve para configurar plugins, alias y el proxy. El prefijo VITE_ se usa para variables de entorno seguras para el navegador. npm run build produce un bundle de Rollup optimizado. npm run preview prueba localmente la compilación de producción.

Preguntas frecuentes

¿La lección «Vite: servidor de desarrollo y build» es gratis?

Sí — el texto completo de «Vite: servidor de desarrollo y build» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Vite: servidor de desarrollo y build»?

Inicie un proyecto de Vite, use su servidor de desarrollo HMR instantáneo, ejecute el comando de build y previsualice el resultado de producción. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Vite: servidor de desarrollo y build»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Módulos ES: import export y dynamic import
  2. npm y package.json: dependencias y scripts
  3. Vite: servidor de desarrollo y build
  4. Conceptos de bundling: tree shaking y code splitting
← Volver a Frontend Academy