Vite + Vue ​

Vite es un bundler y dev server creado por Evan You, el mismo creador de Vue.

Pero, ¿qué es un bundler? ¿y qué es un dev server?

Dev Servers ​

Los servidores de desarrollo son herramientas para crear proyectos de frontend como si ya estuviesen online, con la ventaja de que los cambios que vamos haciendo en el código se actualizan en el browser en tiempo real.

Es decir, los dev servers simulan el comportamiento de un servidor, pero en lugar de mostrarnos el proyecto de frontend en una URL pública (por ejemplo, esta misma: https://frontendlab.vercel.app) generan una URL privada que sólo es accesible dentro de nuestra máquina, llamada localhost como por ejemplo: http://localhost:8080.

Para desarrollar sitios web con HTML y JavaScript (sin frameworks de frontend) el dev server más usado es Live Server, la extensión para VS Code. Si por ejemplo abrimos un archivo index.html con Live Server, éste genera un servidor de desarrollo en la dirección http://localhost:5500. Y si abrimos el browser y ponemos esa dirección en la barra de navegación (en general esto lo hace Live Server automáticamente, pero se puede hacer manualmente), el browser le pide a Live Server el archivo que está en la raíz de esa dirección, y Live Server le sirve, es decir, le responde a esa petición, con el archivo index.html. Luego el browser renderiza el HTML y vemos el resultado en la vista.

Si dentro de ese archivo index.html el browser se encuentra con un script (por ejemplo, <script src="main.js"></script>) el browser le hace una nueva petición al servidor (o sea, a Live Server) pidiendo que le envíe el archivo main.js. El servidor se lo envía como un largo string que el browser parsea, es decir, transforma de un string a código JavaScript, en forma similar a cuando hacemos un JSON.parse(). Luego el browser analiza el código, lo interpreta y, si no hay errores, lo ejecuta.

Y si hacemos algún cambio en nuestros archivos HTML o JS, Live Server le envía la nueva versión al browser y la vista se actualiza con los cambios.

Pero, ¿qué pasa si en vez de enviarle al browser un archivo .js le enviamos un archivo .vue? El browser no va a saber cómo interpretarlo. Para eso necesitamos una herramienta más sofisticada que Live Server, que pueda transformar esos archivos .vue en archivos .js que el browser pueda ejecutar.

Webpack ​

Webpack nació en el 2012 como un bundler (ya vamos a ver qué es eso) y dev server basado en Node.js y con el tiempo se transformó en el más usado, sobre todo en React, Vue y Angular.

Al igual que Live Server, Webpack funciona como un servidor de desarrollo, pero además Webpack compila (es decir, traduce) los archivos .vue, .jsx (React) o .ts (Angular) en un archivo .js (o pueden ser más de uno) que el browser pueda interpretar. Y al igual que Live Server, los cambios en esos archivos se ven reflejados en el browser en tiempo real.

Entonces, cuando en la terminal ejecutamos el comando npm run serve Webpack compila todos los archivos .vue, los transforma en un archivo .js y se lo "sirve" al browser para que éste lo interprete y lo renderice en la vista.

Pero además de ser un servidor de desarrollo Webpack es un bundler.

Bundlers ​

Cuando nuestra aplicación está lista y queremos subirla a un servidor (es decir, que esté online) también vamos a necesitar que los archivos .vue (o .jsx en el caso de React) sean compilados en archivos .js, de lo contrario ningún browser podría ejecutarlos. Para eso tenemos que usar el comando npm run build. Con ese comando Webpack genera un bundle, es decir, un archivo (o conjunto de archivos, también llamados chunks) de código JavaScript (y CSS) que contiene toda nuestra aplicación. Luego ese bundle (también llamado build) puede ser servido públicamente por algún servicio como GitHub Pages, Netlify o Vercel (aunque lo más usual hoy en día es que estos servicios generen un build automáticamente a partir del repositorio en GitHub).

El problema con Webpack ​

A medida que una aplicación crece la cantidad de archivos que Webpack tiene que procesar (tanto para servirlos en desarrollo como para crear el bundle) aumenta y esto hace que Webpack funcione cada vez más lento. Esto es porque Webpack, internamente, usa JavaScript, lo cual tiene sentido, porque el resultado final son archivos JavaScript. El problema es que JavaScript, comparado con otros lenguajes de programación, es bastante lento.

Para solucionar esto, en el 2020 nació ESBuild, un bundler que hace lo mismo que Webpack pero en lugar de usar JavaScript para generar el bundle usa un lenguaje de programación llamado Go que es mucho más rápido que JS. En realidad, muchísimo más rápido:

Como ven en el gráfico, ESBuild puede llegar a ser 125 veces más rápido que Webpack para generar builds.

Vue CLI ​

Al mismo tiempo Evan You, el creador de Vue, estaba trabajando en una nueva versión de Vue CLI, que internamente usa Webpack. Y ahí tuvo la idea de reemplazar Webpack por ESBuild, para que el servidor de desarrollo de Vue funcione en forma más rápida.

Finalmente, Evan You decidió discontinuar Vue CLI y crear un nuevo proyecto llamado Vite.

Si entran a la página de Vue CLI van a ver un cartel que dice que el proyecto se encuentra en modo mantenimiento 🤨️ y recomiendan reemplazarlo por Vite:

Vite ​

Lo que hace Vite es usar ESBuild para compilar los archivos .vue y luego genera un servidor de desarrollo que le sirve al browser estos archivos en la dirección localhost. Al usar ESBuild el servidor de desarrollo funciona entre 10 y 100 veces más rápido que el de Vue CLI.

Sin embargo, para el build final Vite no usa ESBuild, usa Rollup, un bundler creado por Rich Harris, que también es el creador de Svelte. ¿Por qué Vite no usa ESBuild para las dos cosas, el bundler y el dev server? Las razones son complejas, y están explicadas en el sitio de Vite.

Básicamente, la razón principal es que Rollup tiene tree-shaking. Esto le permite descartar el código no utilizado. Por ejemplo, funcionalidades de la librería de Vue que no necesitamos en nuestro proyecto. Es por esto que Vite se integra tan bien con Vue 3, porque Vue 3 solamente usa en cada componente lo que sea necesario de la librería de Vue, descartando el resto. En cambio Vue 2 necesita para funcionar la librería entera.

De todas formas, Vite también puede ser usado con Vue 2, no sólo con Vue 3.

Aunque Vite estaba originalmente pensado para ser usado con Vue, luego fue adaptado para funcionar con casi cualquier framework, incluyendo React y Svelte.

¿Cómo crear un proyecto de Vue con Vite? ​

Es muy fácil, ni siquiera tienen que hacer una instalación adicional como con Vue CLI. Lo único que hay que hacer es:

npm create vue@3
# otra opción:
npm init vue@3
# o también
npm init vue@latest

Ahí les va a pedir que ingresen distintas opciones, igual que con Vue CLI. Para empezar, le pueden poner a todo que no. Luego van al directorio del proyecto, instalan las dependencias con npm install y le dan npm run dev para iniciar el servidor. Y ya de entrada van a notar la diferencia, el servidor se inicia en forma instantánea 🥳️

Y si en vez de npm usan pnpm todo el proceso es incluso más rápido, por la velocidad con que se instalan las dependencias:

pnpm create vue@3
# otra opción:
pnpm create vue@latest

pnpm ​

La razón por la que pnpm es mucho más rápido que npm es porque pnpm reutiliza las dependencies que ya tenemos instaladas en nuestro sistema. Entonces, cuando usamos el comando pnpm install nombre-de-la-libreria pnpm chequea si ya fue instalada y simplemente genera un link al lugar en donde está. Internamente lo que hace pnpm es guardar las dependencias en un directorio global, independiente de cada proyecto particular.

En cambio, npm vuelve a instalar todo de cero cada vez que hacemos npm install 🥱️

Por eso pnpm es especialmente útil si estamos creando varios proyectos con las mismas librerías, que es lo que solemos hacer si estamos usando un framework.

Para empezar a usar pnpm lo único que hay que hacer es instalarlo en forma global:

npm install -g pnpm