0Pricing
Vue Academy · Lección

Ecosistema de Vite: plugins y herramientas

Ecosistema de unplugin, vite-plugin-vue, vite-plugin-inspect y vite-bundle-visualizer

Ecosistema de Vite: plugins y herramientas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

El ecosistema de plugins de Vite

El sistema de plugins de Vite (basado en la interfaz de Rollup, además de hooks específicos de Vite) impulsa un ecosistema muy completo. En proyectos de Vue, algunos plugins mejoran notablemente la experiencia de desarrollo: importaciones automáticas, registro automático de componentes, inspección de transformaciones y análisis de bundles.

unplugin-auto-import

unplugin-auto-import importa automáticamente API comunes (el ref y el computed de Vue, helpers de Router/Pinia y sus propios composables), para que pueda utilizarlos sin escribir sentencias de importación.

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

Importación automática de sus composables

Indique el directorio de sus composables y esas funciones también estarán disponibles globalmente. El plugin genera un archivo .d.ts para que TypeScript y su editor sigan reconociéndolas.

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-components importa y registra componentes bajo demanda: incluya <MyButton /> en una plantilla y el plugin lo importará automáticamente. También aplica tree-shaking a los componentes que no se utilizan.

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

Resolvers para bibliotecas de UI

El plugin de componentes admite resolvers para bibliotecas de UI populares (Element Plus, Vuetify y Naive UI), e importa automáticamente sus componentes y estilos cuando se utilizan, sin necesidad de registrarlos manualmente.

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

vite-plugin-inspect ofrece una interfaz para ver cómo cada plugin transforma su código a lo largo del pipeline. Resulta muy útil para depurar por qué un archivo termina teniendo la forma que tiene.

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

Lectura del pipeline de transformaciones

En la interfaz de Inspect, seleccione un módulo y avance por la transformación de cada plugin. Puede ver, por ejemplo, cómo el SFC de Vue se divide en render/script y cómo la importación automática inyecta código, lo que permite localizar los plugins que funcionan incorrectamente.

Visualizador de bundles

Para comprender el tamaño del bundle de producción, use un plugin visualizador (por ejemplo, rollup-plugin-visualizer). Este genera un treemap interactivo con el contenido de cada chunk después de la compilación.

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

Cómo actuar según los datos del visualizador

Use el treemap para detectar dependencias demasiado grandes y paquetes duplicados. Entre las soluciones habituales se encuentran cargar de forma diferida las rutas o los componentes pesados, cambiar a bibliotecas más ligeras o configurar manualChunks para dividir el código de los proveedores.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

Combinar los plugins

Estos plugins se combinan bien. Una configuración habitual de Vue integra los plugins de importación automática y de componentes, Inspect (solo en desarrollo) y un visualizador (solo durante la compilación) para conseguir un flujo de trabajo fluido.

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

Tenga en cuenta los archivos .d.ts en gitignore

Los plugins de importación automática y de componentes generan archivos .d.ts. Decida si quiere confirmarlos (ayuda a comprobar los tipos en CI sin realizar una compilación) o incluirlos en gitignore (se regeneran al iniciar el desarrollo). En cualquier caso, manténgalos en los includes de tsconfig.

Comprobación rápida

Compruebe su comprensión del ecosistema de herramientas de Vite.

Resumen

Ha aprendido sobre el ecosistema de herramientas de Vite:

  • unplugin-auto-import: importa automáticamente las API y los composables de Vue
  • unplugin-vue-components: importa y registra componentes automáticamente, con resolvers para bibliotecas de UI
  • vite-plugin-inspect: muestra cómo los plugins transforman cada módulo
  • Visualizador de bundles: treemap del contenido de los chunks para orientar la optimización
  • Estos plugins se combinan para crear un flujo de desarrollo y compilación de Vue fluido

Preguntas frecuentes

¿La lección «Ecosistema de Vite: plugins y herramientas» es gratis?

Sí — el texto completo de «Ecosistema de Vite: plugins y herramientas» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Ecosistema de Vite: plugins y herramientas»?

Ecosistema de unplugin, vite-plugin-vue, vite-plugin-inspect y vite-bundle-visualizer Practicas Vue 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 Vue Academy?

No se requiere experiencia previa. Vue 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 2 de 4.

¿Cuánto tiempo toma la lección «Ecosistema de Vite: plugins y herramientas»?

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 Vue Academy?

Sí. Cada lección de Vue 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. Modo Vapor de Vue: optimización en tiempo de compilación
  2. Ecosistema de Vite: plugins y herramientas
  3. Macros de Vue y propuestas de la comunidad
  4. Cómo elegir el stack de Vue adecuado para 2025+
← Volver a Vue Academy