Vita de comentarios del autor del paquete web
Comentario: Vite es un generador de interfaz de usuario nativo basado en ES-Module desarrollado por el autor de vue You Yuxi durante el desarrollo de vue3.0. You Yuxi, el autor de vue, era un generador de interfaz de usuario nativo basado en ES-Module cuando desarrolló vue3.0. Él mismo criticó su nuevo trabajo Vite en las actividades de promoción posteriores de vue3, diciendo que "nunca volvería a webpack otra vez".
Webpack tiene la desventaja de un inicio lento del servidor.
Cuando se inicia en frío un servidor de desarrollo, el enfoque basado en empaquetadores toma y construye con entusiasmo toda la aplicación antes de servirla.
Mejoras de Vite
Vite separa los módulos de una aplicación en dependencias y código fuente desde el principio, lo que reduce el tiempo de inicio del servidor de desarrollo.
Las dependencias son en su mayoría JavaScript puro y no cambian durante el desarrollo. Algunas dependencias más grandes, como las bibliotecas de componentes que contienen cientos de módulos, también son costosas de manejar. Las dependencias también suelen dividirse en una gran cantidad de módulos más pequeños de alguna manera (por ejemplo, ESM o CommonJS).
Vite creará previamente dependencias utilizando esbuild escrito en Go, que es entre 10 y 100 veces más rápido que los empaquetadores escritos en JavaScript.
El código fuente a menudo contiene algunos archivos JavaScript indirectos que deben transformarse (como componentes JSX, CSS o Vue/Svelte) y deben editarse de vez en cuando. Además, no es necesario cargar todo el código fuente al mismo tiempo. (por ejemplo, módulos de código basados en la división de enrutamiento).
Vite proporciona código fuente en un ESM local. Esto efectivamente permite que el navegador asuma parte del trabajo del empaquetador: cuando el navegador realiza una solicitud, Vite simplemente transforma y entrega el código fuente a pedido. El código se importa dinámicamente según el escenario de la aplicación, es decir, solo se procesará cuando realmente se use en la pantalla actual.
Paquete web: analizar dependencias => compilar y empaquetar => entregar al servidor local para su procesamiento. Primero analice las dependencias entre módulos, luego empaquetelos y muestre directamente los resultados empaquetados al iniciar webpack-dev-server y solicitar el servidor.
Problemas con el paquete web empaquetado: a medida que aumenta el número de módulos, el tamaño del paquete será demasiado grande, lo que provocará una velocidad de actualización en caliente significativamente más lenta.
vite: startup server = > Compila dinámicamente y muestra bajo demanda cuando se solicitan módulos. Esto se hace iniciando el servidor de desarrollo y luego compilando los módulos sobre la marcha a medida que se reciben las solicitudes. Dado que los navegadores modernos admiten de forma nativa módulos ES, automáticamente realizarán solicitudes a los módulos dependientes.
Entonces, vite toma el archivo del módulo del entorno de desarrollo y lo usa como un archivo ejecutable para el navegador, en lugar de empaquetarlo y entregarlo al servidor local como lo hace webpack.
Después de analizar los métodos de empaquetado de webpack y vite, podemos ver claramente por qué vite es más rápido que webpack porque no necesita empaquetarse al inicio, por lo que no es necesario analizar dependencias entre módulos ni compilar. . Este enfoque es similar a cómo podemos cargar un determinado marco de interfaz de usuario a pedido mientras lo usamos.
Más eficiente en actualizaciones en caliente. Cuando un módulo cambia, simplemente deje que el navegador vuelva a solicitar el módulo, en lugar de compilar el módulo y sus dependencias de una vez como lo hace webpack.