En el sector en el que trabajamos es bastante habitual que las tecnologías que usamos día a día vayan evolucionando, bien para añadir nuevas características o para mejorar lo ya existente. De vez en cuando también aparece otra tecnología que aunque haga lo mismo acaba reemplazando a otras ya existentes. Hoy hablaremos de Vite, una alternativa a Webpack de la mano del creador de Vue.js, Evan You. Pero antes, veamos muy rápidamente qué es Webpack.
🤔 ¿Qué es Webpack?
Webpack surgió con la necesidad de reducir el tamaño de los archivos Javascript dividiéndolos en múltiples archivos pequeños y creando un gráfico de dependencias de forma que se pudieran tener módulos reutilizables a lo largo de nuestra aplicación. Más tarde se añadió soporte para otros elementos del frontend como HTML, CSS e imágenes, haciendo uso de loaders que interpretaban esta información y la transformaban para que webpack lo entendiese.
🔥 El problema
Con el paso del tiempo esta herramienta ha ido evolucionando hasta el día de hoy, y si bien es bastante popular tiene un gran problema: el rendimiento. Vale, puede que para un proyecto con un par de imágenes y pocos módulos de css y javascript nos valga pero a medida que vamos incrementando éstos el tiempo que tarda en procesar toda esa información va aumentando hasta el punto que para el más mínimo cambio se demora varios segundos mientras que nuestra productividad y felicidad decae.
✨ La solución
Hemos tenido varias alternativas a webpack tales como Gulp.js, Grunt, Browserify... pero sin duda la que más ha destacado últimamente es Vite. Esto se debe a varias razones:
- Clasifica los módulos en dos categorías: dependencias y código fuente.
- Cachea las dependencias ya que éstas no suelen cambiar durante el desarrollo aligerando así las peticiones
- Hace uso de esbuild acelerando así el tiempo de compilación entre 10 y 100 veces.
- Sirve el código fuente usando módulos nativos por lo que los importa a la carta cuando el navegador los solicita
- El código importado de manera condicional sólo se procesa si se está usando en la pantalla actual
💡 Ventajas de usar Vite respecto a Webpack
- Es agnóstico al framework que estemos usando por lo que nos da igual si tenemos una app en Vue, React, Preact, Svelte, VanillaJS... etc
- Soporte nativo para Typescript
- Ofrece soporte multi página
- Preprocesadores de CSS como Sass, Less, Stylus además de PostCSS y módulos de CSS
- Server-Side Rendering (SSR) - ⚠️ EXPERIMENTAL
- Uso de variables de entorno
💻 Mi primera app con Vite
Requisitos:
- Node.js >= 12.2.0
- NPM o Yarn o cualquier gestor de dependencias de node
Ya que hemos decidido que vamos a usar Vite vamos a ver el cómo. En su documentación está bastante bien detallado así que no voy a extenderme mucho. Hay varias plantillas disponibles según el tipo de app que vayamos a crear. También podemos crear un proyecto sin plantilla. En mi caso voy a crear una app con react, para ello:
yarn create vite my-vue-app --template react
Los posibles valores son: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts .
El sufijo -ts indica que se creará preparado para typescript. Con esto ya tenemos nuestra app lista para trabajar.
Conclusión
Cierto es que Vite pone contra las cuerdas a Webpack en bastantes aspectos, pero no va a desaparecer de la noche a la mañana. Aún así, Vite plantea varias cosas interesantes y pueden servir para que ambas herramientas mejoren, por lo que habrá que ver cómo va evolucionando. No es la primera vez que aparece una tecnología que parece que lo va a cambiar todo y al final acaba en el pozo. Yo por mi parte pienso que Vite es bastante más cómodo a la hora de trabajar por lo que será mi apuesta y tendré que lidiar con las consecuencias tanto para bien como para mal.
¡Y hasta aquí hemos llegado! Si te interesan este tipo de artículos no olvides pasarte periódicamente ya que cada semana hay algo nuevo
