Curso de Vite.js

Curso de Vite.js

Diana Martínez

Diana Martínez

Características de Vite

3/19
Recursos

Aportes 6

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

🧤 Características de Vite

Ideas/conceptos claves

Apuntes

**ES Modules**

Es el estándar ECMAScript para trabajar con módulos.

Resolución de dependencias

Prebuilding

  • Es estandarizar los módulos
  • Los módulos por muchos años no estuvieron estandarizados hasta que apareció el estándar de ECMAScript con los es modules
  • Aún existen muchos frameworks y librerías que se transpilan para formatos anteriores como ser
    • Common JS
    • UMD
    • AMD
  • Esto hace que haya muchas incompatibilidades en la web, lo que hace vite.js primero es convertirlo en un ES module

Dependency Resolving

  • Va a ayudar a optimizar el cómo se obtiene estas librerías y módulos dentro de nuestro proyecto
  • Lo primero que hace Vite.js es generar un servidor de archivos estático
    • Es decir, que va a tomar todos los archivos del proyecto y los va a hacer disponibles para acceder desde el navegador
    • De esta manera va a reemplazar los imports vía node.js por urls
  • También se asegura de servir los archivos de forma inteligente y con caché, para optimizar tiempo y procesamiento
    • Esto lo hace subdividiendo las dependencias y ordenando las importaciones para que todo esté listo para el momento de uso
    • Utiliza un caché fuerte, el cual se asegura que los archivos se queden en el navegador a menos que se limpie la caché del mismo

Hot Module Replacement (HRM)

  • Es hacer que ni bien se guarden los archivos en el editor automáticamente se reflejen los cambios sin necesidad recargar el navegador sin perder el estado de la aplicación
  • Permite una mejor experiencia de desarrollo al ser mucho más rápido que los convencionales

Integración simple con TypeScript

  • Desde el primer momento el proyecto de Vite tiene integración con TypeScript sin necesidad de alguna configuración adicional
  • Es opcional la configuración de TypeScript
  • Es totalmente utilizable con cualquier librería o framework

Integración con frameworks

  • Soporte perfecto con Vue.js
    • Vite es desarrollado por el team de Vue.js por lo cual la integración es simple y completa
  • Útil para usar JSX con Vue.js
  • Hace que sea extremadamente simple usar Vite con React.js

Integración de archivos

  • Resuelve la importación sin necesidad de loaders
  • Es simple de usar con archivos multimedia, de estilos, de código o con los pre-procesadores más comunes, incluyendo TypeScript

Build Optimization

  • Permite tomar el control de la configuración
    • Es opcional el archivo de configuración para vite
  • Optimiza la velocidad en desarrollo gracias a esbuild
  • Optimiza el bundle de producción gracias a rollup
    • Mediante el archivo de configuración de Vite se puede configurar el bundler de Rollup
  • Rollup al momento de optimizar hace la importación de dependencias de manera inteligente
    • Realiza la tarea de forma inteligente de saber cuáles son los módulos que utilizará el proyecto y predecir hasta cierto punto cuáles son los módulos que van a seguir para importarlos de un inicio

Soporte a Web Workers y Web Assembly

  • Los web workers son una característica de JavaScript para crear procesos alternativos al proceso principal de donde se ejecuta nuestra página web y estos tienen una configuración que puede ser tediosa
    • Con Vite nos permite únicamente importar y utilizarlos
  • Vite.js nos permite Web Assembly importando los archivo e invocándolo de una cierta manera para que se ejecute
    • Si requiere inyectar alguna dependencia te permite realizarlo
    • Vite te facilita el uso a diferencia de vanilla JS

Con la salida de Vite Webpack se verá obligado a mejorar o desaparecerá.

Soy un usuario experimentado de Vite.js. En mi equipo lo usamos porque es mucho mas rapido que webpack

Vite.js va ser lo próximo que use en mis proyectos

de acuerdo a todas las ventanas que trae Vite auguro que en un futuro muy próximo Vue.js va a crecer mucho en aceptación, a aprender Vue.js pues!!!

Características de Vite

Capacidad de resolución de dependencias

Pre-bundling

Agrega compatibilidad, pues adapta módulos en CommonJS o UMD, al formato estándar de ECMAScript, los ES Modules.

Dependency Resolving

  • Usa un servidor estático para exponer los archivos vía URL.
  • Reemplaza tus imports vía NodeJS, por imports URL.
  • Sirve los archivos de forma inteligente y con caché, para optimizar tiempo y procesamiento.

Cuando recargamos la pagina los archivos quedan en la caché del navegador, esto permite que se sirvan inmediatamente y no tengamos que repetir solicitudes. Para borrar estos archivos necesitamos borrar cache para que vuelva a solicitarlos.

Hot Module Replacement (HMR)

Es básicamente que al guardar los cambios en nuestro editor podamos visualizarlos inmediatamente en nuestro navegador.

Actualización del navegador

  • Realiza la recarga de la página, pero sin perder el estado de la aplicación.
  • Permite una mejor experiencia de desarrollo al ser mucho más rápida que los convencionales.

Integración simple con TypeScript

Desde el momento 0 es compatible con typeScript

Puede agregarse archivo de configuración si lo deseamos

Integración con frameworks

Tiene integración perfecta con Vue.js (es desarrollado y mantenido por el core de Vue.js)

Soporte para JSX

  • Útil para usar JSX con Vue.js
  • Hace que sea extremadamente simple usar Vite con React.js

Importación de archivos

  • Resuelve la importación sin necesidad de loaders
  • Es simple de usar con archivos multimedia, de estilos, de código o con los pre-procesadores más comunes, incluyendo TypeScript.

Build Optimization

Optimizar para producción

  • Permite tomar el control de la configuración
  • Optimiza la velocidad en desarrollo gracias a esbuild.
  • Optimiza el bundle de programación gracias a rollup.

Rollup esta diseñado para identificar que módulo A necesita el módulo B y ejecuta la descarga en paralelo para hacer uso eficiente del tiempo

Soporte a Web Workers y Web Assembly

Web Workers: Son una característica de JS que nos permite crear procesos alternativos al proceso principal donde se ejecuta nuestra página web.

Los web workets tienen una configuración especifica y lo que permite Vite importar de una manera especifica y más sencilla para los programadores

WebAssembly: Es un formato de código binario portable, para la ejecución integrada en navegador de scripts del lado del cliente.

Lo que permite es una integración y ejecución sencilla de la forma normal de manilaJS