Características de Vite

Ahora que conocemos la historia detrás de Vite vamos a ver sus principales características, donde destaca la reinvención de muchos procesos, como la resolución de dependencias, la implementación con TS, el HMR, entre muchas otras funcionalidades.

Optimizacion de codigo

Vite optimiza muchos de los procesos por los que tiene que pasar el código, para de tal modo enfocarse en un mejor rendimiento y experiencia de desarrollo.

Pre-bundling

Es la etapa donde se estandarizan los módulos, pues adapta módulos en CommonJS o UMD al formato estándar de ECMAScript.

Dependency resolving

Vite optimiza el proceso en que se obtienen librerías y módulos estandarizados. Funciona de la siguiente manera:

1. Utiliza un servidor estático para exponer los archivos vía URL.
2. Reemplaza los imports vía NodeJS por imports URL.
3. Sirve los archivos de forma inteligente y con cache, para optimizar tiempo y procesamiento.

Hot module replacement (HMR)

El HMR es cuando se hace un cambio en el código y este se ve reflejado en el navegador casi de forma inmediata, sin perder el estado de la aplicación y sin tener que recargar el navegador. Esto nos otorga una mejor experiencia de desarrollo al ser más rápido.

Importación de archivos

Nos otorgará una importación de archivos simplificada.

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

Integración simple con TypeScript

TS es automáticamente sin necesidad de una configuración adicional compatible con Vite. Aun así, podrás agregarle una configuración adicional que funcionara con cualquier librería o framework.

Optimizacion para produccion

Te proporcionará una serie de optimizaciones a la hora de transpilar para producción o hacer lo que llamamos el build.

• Permite tomar el control de la configuración. Podrás utilizar la configuración por defecto tanto en desarrollo como en producción, o bien, podrás tener una configuración más específica y controlada por ti.
• La velocidad en desarrollo aumenta gracias a esbuild.
• Optimiza el bundle de producción gracias a Rollup. La importación de dependencias se hace de modo inteligente, es decir, resuelve los módulos a emplear en el proyecto y predice hasta cierto punto los módulos que van a seguir, para importarlos desde un inicio.

Soporte a Web Workers y Web Assembly

Los Web Workers son una característica de JS que nos permite crear procesos alternativos al proceso principal. Implementarlos puede llegar a tener una configuración complicada, pero con Vite no, teniendo la posibilidad de importarlos de una manera específica y estar listos para ser usados. Aunque tambien existe la posibilidad de importar un archivo Web Assembly e invocarlo donde queramos que se ejecute.

Contribución creada por: Jofay Zhan Segura