Características de Vite

🧤 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

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

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

Características de VITE

• Resolución de dependencias
  • Pre-bundling: agrega compatibilidad adaptando los módulos CommonJS o UMD a el estándar de ECMAScript: ES Modules
    • Esto significa que puedes utilizar código que utiliza CommonJS o UMD en una aplicación que utiliza módulos de ECMAScript sin tener que hacer ningún trabajo adicional.
    • Vite.js se encarga de adaptar el código para que pueda ser utilizado en una aplicación que utiliza módulos de ECMAScript de forma transparente para el usuario.
  • Dependency resolving
    • Usa un servidor estático para exponer los archivos vía URL
      • Se accede a los archivos del proyecto a través de URL’s
    • Reemplaza tus imports vía NodeJS por imports URL
      • En lugar de utilizar el sistema de módulos de Node.js y el proceso de resolución de rutas de archivos, Vite.js utiliza un enfoque basado en URLs para la carga de módulos y archivos en tus aplicaciones.
    • Sirve los archivos de forma inteligente y con caché, para optimizar el tiempo y procesamiento
      • Carga una vez los archivos y se almacenan en caché para acceder más rápido a la información
    • Hot module replacement
      • Cuando se guardan los cambios en el editor de código se reflejan automáticamente en el navegador
      • Se realiza la recarga de la página sin perder el estado de la aplicación
      • Permite una mejor experiencia de desarrollo al ser mucho más rápido que el resto
    • Integración con TypeScript sin configuraciones adicionales
    • Integración con frameworks
      • Fue desarrollado con VUE.js
      • Muy fácil usar con React.js
    • Importación de archivos simplificada
      • Resuelve la importación sin necesidad de loaders
        • Vite.js es que utiliza un enfoque de importación dinámica para resolver módulos de JavaScript, lo que significa que no es necesario utilizar loaders o configurar manualmente los resolve.alias o resolve.extensions en la configuración de Webpack.
      • Es simple de usar con archivos multimedia, de estilos, de código o con los pre procesadores más comunes (SASS, LESS, Stylus), incluyendo TypeScript
    • Build Optimization
      • Optimizar para producción
        • Permite tomar el control de la configuración
        • Optimiza la velocidad en desarrollo gracias a esbuild
          • “esbuild” es un compilador de JavaScript rápido y ligero.
          • Esbuild es una herramienta de línea de comandos que se utiliza para compilar archivos JavaScript y otros archivos relacionados (como archivos de configuración de TypeScript o archivos de hojas de estilo) a un formato compatible con los navegadores web
        • Optimiza el bundle de producción gracias a rollup
          • Webpack descarga cada módulo por separado y si uno depende de otro, hasta que se necesite, hace la petición a éste
          • Rollup descarga el módulo y al notar que depende de otro, descarga automáticamente el otro módulo, de forma que al hacer la petición éste ya está disponible.
            • Rollup es una herramienta de línea de comandos que se utiliza para agrupar varios archivos JavaScript y otros archivos relacionados (como archivos de configuración de TypeScript o archivos de hojas de estilo) en un solo archivo, conocido como “paquete” o “bundle”.
            • El bundle se puede utilizar para reducir la cantidad de solicitudes que se envían al servidor cuando se carga una aplicación web, lo que puede mejorar la velocidad de carga de la aplicación.
            • Vite.js se integra con Rollup para ofrecer un empaquetado rápido y eficiente de los archivos de la aplicación en la fase de producción. Esto significa que puede construir su aplicación para producción y obtener un paquete optimizado que se cargará rápidamente en los navegadores.
      • Soporte a Web Workers y Web Assembly
        • Web Workers son una característica de la plataforma web que permiten la ejecución de código JavaScript en un hilo separado del hilo principal del navegador. Esto puede ser útil para realizar tareas pesadas o costosas en términos de tiempo de procesamiento sin afectar el rendimiento de la interfaz de usuario de la aplicación.
        • Web Assembly es un lenguaje de máquina de alto nivel diseñado para ser utilizado en el contexto de la web y que se ejecuta directamente en el navegador. Se utiliza para optimizar el rendimiento de aplicaciones web y puede ser utilizado junto con JavaScript para mejorar la velocidad y el rendimiento de aplicaciones web complejas.

que grande vite