0Pricing
Frontend Academy · Lección

Vite: sistema de plugins y modo SSR

Escriba un plugin de Vite con hooks transform y load, integre plugins de terceros y configure Vite para el renderizado en el servidor con la opción ssrBuild.

Vite: sistema de plugins y modo SSR es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 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.

Por qué triunfó Vite

Vite (en francés, «rápido») fue creado por Evan You. Durante el desarrollo sirve los archivos fuente sin empaquetar mediante módulos ES nativos, lo que permite arranques en frío instantáneos. En producción utiliza Rollup para empaquetar. La experiencia de desarrollo es considerablemente más rápida que con Webpack.

Cómo funciona el servidor de desarrollo de Vite

Los navegadores modernos admiten módulos ES de forma nativa. Vite sirve los archivos fuente tal cual y transforma TypeScript/JSX bajo demanda. Al no empaquetar, no hay que esperar durante los arranques en frío.

Reemplazo de módulos en caliente

HMR reemplaza los módulos sin recargar la página. El HMR de Vite se basa en ESM y es mucho más rápido que el de Webpack. La mayoría de los frameworks (React, Vue y Svelte) se integran con él para actualizar componentes conservando el estado.

Conceptos básicos de la configuración de Vite

Configure Vite mediante vite.config.ts en la raíz del proyecto.

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

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

El sistema de plugins

Los plugins de Vite son una extensión de los plugins de Rollup, con hooks adicionales para el servidor de desarrollo. Un plugin es un objeto (o una función que devuelve uno) con hooks con nombre.

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

Hooks principales

transform(code, id): modifique el contenido de los archivos (por ejemplo, compile MDX o inyecte el entorno). load(id): proporcione contenido para módulos virtuales. resolveId(source): personalice la resolución de módulos. configureServer(server): añada middleware al servidor de desarrollo.

Plugins populares

@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (importe SVG como componentes). vite-plugin-checker (TypeScript / ESLint en una superposición). vite-plugin-mkcert (HTTPS local).

Modo SSR de Vite

Vite admite el renderizado del lado del servidor mediante primitivas de bajo nivel. Frameworks como Nuxt, SvelteKit, Remix y Astro se construyen sobre él. Para un SSR personalizado, siga la guía de SSR de Vite.

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

Compilación para SSR

Se realizan dos compilaciones: cliente y servidor. vite build --ssr entry-server.ts genera el bundle del servidor.

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

Variables de entorno

import.meta.env.MODE es 'development' o 'production'. Las variables personalizadas con el prefijo VITE_ se exponen.

Gestión de CSS

Vite gestiona CSS, CSS Modules (foo.module.css), PostCSS (detecta automáticamente postcss.config.js) y preprocesadores de CSS (Sass, Less y Stylus) de fábrica. Inyecte CSS crítico mediante plugins.

Vite frente a Webpack y Turbopack

Vite: desarrollo nativo de ESM, compilaciones con Rollup y un ecosistema amplio. Webpack: enorme y heredado, más configurable y más lento. Turbopack (Vercel): basado en Rust, compatible con Webpack y actualmente incluido con Next. Para proyectos nuevos: Vite para SPAs y Next/Turbopack para proyectos específicos de Next.

Comprobación rápida

¿Por qué el arranque en frío del servidor de desarrollo de Vite es mucho más rápido que el de Webpack?

Repaso: Vite

Servidor de desarrollo basado en ESM: arranque en frío instantáneo y HMR rápido. En producción utiliza Rollup. Los plugins amplían los hooks de Rollup (transform, load y resolveId), además de los hooks específicos de Vite (configureServer y handleHotUpdate). Modo SSR mediante createServer + middlewareMode; compile con --ssr. Plugins para PWA, MDX, SVGR y mkcert. Use import.meta.env para las variables de entorno. CSS Modules, PostCSS y los preprocesadores vienen integrados.

Preguntas frecuentes

¿La lección «Vite: sistema de plugins y modo SSR» es gratis?

Sí — el texto completo de «Vite: sistema de plugins y modo SSR» 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: sistema de plugins y modo SSR»?

Escriba un plugin de Vite con hooks transform y load, integre plugins de terceros y configure Vite para el renderizado en el servidor con la opción ssrBuild. 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 1 de 4.

¿Cuánto tiempo toma la lección «Vite: sistema de plugins y modo SSR»?

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. Vite: sistema de plugins y modo SSR
  2. esbuild: velocidad y limitaciones
  3. pnpm Workspaces para monorepos
  4. Turbo: caché y pipelines de tareas
← Volver a Frontend Academy