Vite

> Temas > Vite
Editar

Vite es una herramienta frontend de nueva generación que permite crear un servidor de desarrollo y compilar (hacer el build) del código para producción. También conocida como ViteJS.

Vite es una herramienta frontend aparecida recientemente cuya utilidad bien podríamos equiparar a otras herramientas conocidas como Webpack. En resumen, permite trabajar con el código frontend, realizando las correspondientes transformaciones necesarias para poder ejecutarse en los navegadores de manera optimizada.

Vite, sin embargo, ofrece un enfoque de trabajo más sencillo y, sobre todo, más ágil. Estas serían sus características principales y diferencias con herramientas como Webpack, Parcel o Rollup:

  • Comenzar a desarrollar un proyecto con Vite es cuestión de minutos y se puede resumir todo a lanzar un simple comando de consola, mientras que usar Webpack requiere tiempo de preparación del proyecto, configuración de varios archivos, y a menudo bastantes conocimientos.
  • En el caso de Vite cuentas con una configuración ya establecida que permite adaptarse a los proyectos más habituales, por lo que en la mayoría de los casos puedes usarlo sin mayores complicaciones y sin necesidad de lidiar con la configuración.
  • Vite está desarrollado encima de algunas herramientas de nueva generación como esbuild, que permiten una velocidad mucho mayor que otras más tradicionales como Webpack.
  • Dispone de un servidor de desarrollo ultra rápido, que puedes arrancar en cuestión de segundos. La compilación del código y la actualización del navegador se hacen automáticamente en milisegundos, aunque la cantidad de código Javascript sea enorme, lo que permite una experiencia de desarrollo mucho más ágil.
  • El build del proyecto para llevar a producción se realiza por debajo con Rollup, sin embargo, muchas de las configuraciones más habituales, como dividir el código en diversos bundles, se hace de manera automática y predeterminada.
  • Puede compilar TypeScript, JSX, CSS, preprocesadores...
  • Es extensible a través de plugins y puedes usar los plugins de Rollup ya existentes.

El proyecto surge desde la comunidad de VueJS, sin embargo puedes usar Vite con cualquier stack de tecnologías frontend, como por ejemplo React, Lit, o simple Javascript vanilla. Tal como está realizado su uso más relevante sería el desarrollo de SPA o PWA, pero también lo puedes usar para desarrollar sitios web tradicionales. Prueba de ello es que incluso frameworks backend como Laravel hay integrado Vite entre sus herramientas de cabecera para desarrollar y producir el código del lado del cliente.

Sitio web oficial: vitejs.dev

Más información:

Vite

Vite optimiza la etapa de desarrollo

Una de las ventajas de Vite es que facilita mucho la etapa de desarrollo. Si alguna vez has desarrollado un proyecto con Webpack (o incluso con Angular o Create React App que están basados en Webpack), habrás observado que desde que guardas un archivo hasta que se actualiza el navegador para mostrar los cambios pueden pasar varios segundos.

Especialmente, cuando tienes muchas cantidades de Javascript, este proceso puede ser muy lento y por tanto hacer que la experiencia de desarrollo sea un poco tediosa, todavía más en equipos con poca capacidad de cómputo o entornos de desarrollo virtualizados.

Vite en cambio es increíblemente rápido!! en cuestión de milisegundos tienes la página ya actualizada, por lo que no te ralentiza tu ritmo para nada.

Esto lo consigue gracias a Esbuild, que es una herramienta de compilación basada en el lenguaje de programación Go, que además se apoya en código nativo. Pero además Vite consigue la optimización de no compilar de nuevo todo el código del proyecto, sino simplemente las partes que han cambiado, por eso es todavía más rápido.

El servidor de desarrollo incluye live-reload, tree shaking y otras mejoras habituales de los entornos, pero con la diferencia que lo consigues todo sin necesidad de realizar ninguna configuración.

Editar

Vite permite builds avanzados con cero-configuración

La etapa de Build también mejora con Vite, gracias a su base de configuración predeterminada, que se adapta de manera excelente a las aplicaciones modernas.

Por debajo usa Rollup (no usa esbuild para crear los bundles) que es un poco más lento pero no impacta en el día a día del desarrollo, ya que los builds son mucho menos frecuentes. Lo bueno es que se beneficia de una herramienta madura.

Una de las cosas que más resultan atrayentes del build de Vite es que produce de manera automática el code-splitting, es decir, parte los bundles de manera que no tengan tanto peso y se puedan descargar por separado, dependiendo de la sección de la aplicación en la que se haya entrado.

Por ejemplo, si estás desarrollando una SPA y entras en la home, gracias al code-splitting descargarás solamente los componentes de esta sección (y los comunes a toda la app) y no cada uno de los cientos de componentes de todo el proyecto. Esto lo hace simplemente interpretando todos los imports dinámicos que encuentra en el código, creando un bundle para cada import dinámico.

Por supuesto, también es capaz de compilar lenguajes como TypeScript, Sass, realizar transformaciones PostCSS, etc.

Editar

Crear un nuevo proyecto con Vite

Vite viene con unos comandos npm que permiten crear fácilmente la estructura de un proyecto frontend, con las carpetas y scripts necesarios para realizar el desarrollo y la producción de los bundles.

Para crear un nuevo proyecto con Vite en cualquiera de los stack de tecnologías más populares lanzamos el siguiente comando:

npm create vite@latest

Algunos de los templates para el scaffolding de proyectos que podremos encontrar disponibles incluyen Javascript Vanilla, React, Preact, Vue, Lit, Svelte... y tienes versiones con y sin TypeScript integrado de entrada. Además, de manera "no oficial" encuentras muchos otros andamiajes de proyectos que incluyen frameworks y librerías menos conocidos o personalizaciones de estos templates que incluyen mejoras de diversa utilidad.

Editar

Scripts disponibles en los proyectos Vite

Una vez que tenemos el proyecto creado, podemos encontrar en el package.json algunos scripts para realizar las tareas comunes:

Arrancar el servidor de desarrollo de un proyecto creado con Vite

Para levantar el servidor de desarrollo de un proyecto Vite lanzamos el siguiente comando desde la raíz del proyecto:

npm run dev

Llevar a producción

Para compilar el código y llevar a producción el proyecto lanzamos el siguiente comando npm:

npm run build

A partir de estos dos comandos tienes cubiertas las necesidades normales de los proyectos de aplicaciones Javascript. Vite se encargará de hacer su trabajo de una manera sencilla y versátil, y sin mayores necesidades de configuración.

Editar

¿Quieres añadir algo sobre Vite?

Crea artículos, recursos o comparte información sobre Vite

Crear un bloque

Preguntas y respuestas de Vite

Se han recibido 0 faqs en Vite

Hacer una pregunta