Vite

Cuando desarrollamos aplicaciones una parte importante es generar el proyecto, tener un servidor de desarrollo y hacer el build. Aqui es donde usamos herramientas como create-react-app, vue-cli, y demas.

estas por lo general estan basadas en Webpack, sin embargo actualmente tenemos una opcion más moderna. Esta opcion es Vite.

¿Qué es Vite?

• es orientada a bibliotecas
• Vite esta desarrollada por el mismo creador de Vuejs, Evan You. Pero la herramienta no solo sirve con Vue sino tambien con frameworks como React, Angular, Svelte, Solidjs, Lit, y Vanilla Javascript y Typescript.
• soluciona el problema de carga de archivos reemplanzando los bundlers con ES Modules y compilando el código usando esbuild (un generador de modulos basado en Go que es extremadamente rapido)
• /vit/ es una palabra francesa que significa rapido

Estos son los sitios oficiales de Vite:

• https://vitejs.dev/

¿Porque Vite?

• Los module bundlers como Webpack, Rollup o Parcel tienen que hacer un proceso de build en cada estado. A mas grande la aplicación mas tiempo toma. Es decir estas herramientas primero hacen un build de todos los modulos y luego el servidor de desarrollo esta listo. Vite por otro lado, lo que hace es que el servidor ya esta disponible desde el primero mento, y en lugar de procesar todas las dependencias, toma solo los modulos que han cambiado son procesados por esbuild. El cual es un compilador bastante rapido escrito en Go.

• Vite usa routing spliting para ver que modulos necesitan ser cargados. esto lo hace mientras se ejecuta la aplicacion asi que no es necesario hacer un build.

• En desarrollo Vite hace uso de los ES Modules los cuales son caracteristicas que soportan los navegadores actuales, asi que el navegador toma el trabajo de hacer el bundle, sin embargo en produccion hace uso de rollup para hacer un bundle.

• HMR (Hot module replacement, mucho más veloz) builds muchos mas rapidas tanto en desarrollo como en produccion

• no necesita todo el boilerplate de webpack para poder tener un entorno comodo de desarrollo

• Multi-Page Support. Vite por defecto soporta la creacion de multiples paginas sin necesidad de configurarlo. solo añades una pagina nueva y esta ya esta lista.

• Library Mode

• Css code splitting

• optimed asyn chunk loading

• framework agnostic

• SSR (Universal plugins) provistos por Rollup

¿Qué no es Vite?

Vite no es un nuevo Framework, es una herramienta alternativa a las herramientas de construccion de estos frameworks. como Webpack o Parcel.

Requerimientos

• Nodejs Instalado

Instalacion de un Proyecto en Vite

npm create vite-example

En nuestro caso escogeremos vanilla javascript para empezar.

cd vite-example

npm install

npm run dev

para construir nuestra aplicacion para produccion:

npm run build

para ver como queda nuestra aplicacion en produccion

npm run preview

Vite vs React

puedes compararlos creando dos proyectos en paralelo

• vite: npm create vite
• react: npx create-react-app

las diferencias principales, son que:

• una creacion e instalacion rapida del proyecto
• una ejecucion mas rapida por parte del servidor de desarrollo (HMR)
• builds mas optimizadas por parte de Vite
• si cambias código el estado se mantiene. esto es muy util por ejemplo si actualizas un modal y cambias los estilos podras seguir viendo el modal abierto.

Despliegue

crea un repositorio que se llame: vite-tutorial

instalar gh-pages:

npm i gh-pages

en tu configuracion de vite.config.js actualizalo:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: '/vite-tutorial/'
})

npm run build

añade un archivo deploy.sh:

En mi caso teniendo el usuario faztweb y el repositorio vite-tutorial, actualizando el archivo quedaria asi:

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git checkout -b main
git add -A
git commit -m 'deploy'

# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:faztweb/vite-test.git main:gh-pages

cd -

npm run preview

añade este script a tu package.json:

"deploy": "gh-pages -d dist" 

npm run deploy

Más recursos

• snowpack

• webpack

• parcel

• esbuild

• rollup

• https://vitejs.dev/guide/build.html#multi-page-app

• https://vitejs.dev/guide/ssr.html#example-projects

• https://vitejs.dev/guide/env-and-mode.html

• https://www.npmjs.com/package/vite-plugin-eslint

• https://dev.to/shashannkbawa/deploying-vite-app-to-github-pages-3ane