¿Qué es Vite?

Vite es una herramienta de construcción que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y educativa para proyectos web modernos. Ofrece una solución sin empaquetar, lo que significa que no necesitamos ningún paso de empaquetado adicional durante el desarrollo de nuestra aplicación Vue.

Comparémoslo con Vue-CLI para entender cómo funciona esto.

¿Cuál es la diferencia entre Vite y Vue-CLI?

Vue-CLI es una herramienta para configurar rápidamente un proyecto basado en Vue, que incluye la creación de proyectos, un servidor de desarrollo con recarga en caliente de módulos y un sistema de complementos. Vue-CLI está construido sobre Webpack, por lo que el servidor de desarrollo y la funcionalidad de construcción y rendimiento serán un superconjunto de Webpack.

Vite también es una herramienta de construcción con la creación básica de proyectos y un servidor de desarrollo, pero en lugar de usar Webpack, basa su operación en módulos ES nativos. Esto proporciona mejoras ricas en funciones, como un Reemplazo Rápido de Módulos (HMR) extremadamente rápido.

¿Cómo funciona Vite en producción?

Hasta ahora, hemos hablado sobre los beneficios de Vite durante el desarrollo, pero ¿qué hay de la producción? ¿Cómo podemos prescindir de Webpack? Bueno, Vite proporciona un comando de construcción que empaqueta tu código con Rollup, preconfigurado para generar activos estáticos altamente optimizados en producción.

Veamos algunos beneficios extra de Vite

Vite significa rápido en francés, y no hay duda de que la velocidad es su principal atractivo. Pero también incluye características interesantes:

• Admite la importación de archivos TypeScript de manera predeterminada.

• Fue creado para trabajar con Vue 3, pero también es compatible con Vue 2 e incluso otros frameworks como React.

• Así que sí, los archivos .jsx y .tsx también se admiten de manera predeterminada. La transpilación de JSX también se maneja a través de ESBuild, y por defecto utiliza el sabor de React 16.

• Admite CSS, PostCSS, Módulos CSS y preprocesadores de CSS.

• Funciona con activos estáticos, JSON, importaciones glob, Web Assembly, Web Workers, optimizaciones de construcción, ¡y la lista continúa!

Pruébalo tú mismo y házmelo saber cómo te ayudó.

👏 🎉 Agradecemos realmente este tiempo juntos. Hasta la próxima.

¡Por favor, recuerda mantenerte a salvo!

Si estás buscando un nuevo equipo de desarrollo para manejar tu transformación digital, nos encantaría que consideres a nuestro equipo. Envíanos un correo electrónico a info@darwoft.com para ver si podríamos ser una buena opción.

Construyamos lo que sigue. Juntos.