Tabla de contenido
La diferencia entre Vite y paquete web.
Método de inicio del servicio y complejidad de uso.
¿Cuáles son las ventajas de vite en comparación con webpack (por qué elegir vite)?
el servicio de invitaciones comienza más rápido
La actualización en caliente del servicio Vite es más rápida
Fácil de usar y configuración simplificada
Compatible con bibliotecas y herramientas de compilación existentes
Para obtener más puntos técnicos relacionados con el front-end de Vue, preste atención a la cuenta pública: publicaciones posteriores de CTO Plus . Si tiene alguna pregunta, deje un mensaje en segundo plano para comunicarse.
Vite es una herramienta de desarrollo front-end rápido que aprovecha la compatibilidad del módulo ES nativo de los navegadores modernos para lograr tiempos de inicio de segundo nivel y vistas previas en tiempo real. La configuración de Vite es simple y flexible y puede satisfacer las necesidades de la mayoría de los proyectos. Con Build and Deploy, puede implementar su proyecto Vite en un entorno de producción, entregando archivos estáticos optimizados o páginas HTML renderizadas previamente.
Texto original de este artículo: Pila de tecnología de desarrollo front-end (herramientas): la diferencia entre las herramientas de construcción front-end Vite y webpack, ¿por qué elegir Vite?
Los artículos anteriores sobre la cuenta pública CTO Plus presentaron el uso y la introducción detallada de nvm, node.js, vite, webpack y otras herramientas, de la siguiente manera:
"Pila de tecnología de desarrollo front-end (herramientas): 2023 Comprensión profunda de la instalación y el uso de la herramienta de desarrollo rápido vite (detalles)"
"Pila de tecnología de desarrollo front-end (herramientas): 2023 Comprensión profunda de la instalación y el uso del paquete web, así como de los conceptos centrales y los procesos de inicio (detalles)"
Por lo tanto, este artículo resumirá las diferencias entre las dos herramientas de construcción front-end, vite y webpack, y explicará por qué elegir Vite es una mejor opción.
"Pila de tecnología de desarrollo front-end (herramientas): algunas prácticas de Vite en proyectos y las diferencias entre Vite y webpack, ¿por qué elegir Vite?"
En el próximo artículo, presentaré el uso de Vite con algunos casos prácticos. Estén atentos al próximo artículo de la cuenta pública CTO Plus :
"Caso práctico de Vite: creación de un proyecto front-end moderno, rápido y eficiente"
Para obtener más conocimientos, herramientas y técnicas sobre el desarrollo front-end de Vue, preste atención a los artículos de seguimiento de la cuenta pública CTO Plus . Si tiene alguna pregunta, deje un mensaje en segundo plano para comunicarse.
"Pila de tecnología de desarrollo front-end (herramientas): introducción detallada a qué son npm, pnpm y cnpm, cómo usarlos y cuáles son las relaciones entre ellos"
"Pila de tecnología de desarrollo front-end (herramientas): construcción del proyecto Vue/Node.js y uso del administrador de paquetes npm y explicación detallada del comando"
En los artículos anteriores "Pila de tecnología de desarrollo front-end (herramientas): 2023 Comprensión profunda de la instalación y el uso de la herramienta de desarrollo rápido vite (detalles)" y "Pila de tecnología de desarrollo front-end (herramientas): 2023 In- comprensión profunda de la instalación y el uso de webpack y sus conceptos básicos y proceso de inicio (detalles) "brinda una introducción detallada a estas dos herramientas respectivamente. Preste atención a la cuenta oficial CTO Plus de las diferencias entre estas dos herramientas, así como vite ¿Cuáles son las ventajas en comparación con webpack (por qué elegir Vite), y luego daré algunas explicaciones prácticas sobre el uso de Vite basadas en la práctica en el próximo artículo?
La diferencia entre Vite y paquete web.
Vite y webpack son dos herramientas de creación de front-end de uso común y tienen algunas diferencias en funciones y uso. A continuación presentaré en detalle la diferencia entre Vite y webpack.
Cómo construir
Vite utiliza un nuevo método de compilación llamado compilación "ESM nativa". Aprovecha el soporte nativo del navegador para módulos ES al construir cada módulo como un archivo separado, en lugar de agrupar todos los módulos en un solo archivo como lo hace webpack. Este enfoque proporciona arranques en frío y actualizaciones en caliente más rápidos.
Webpack utiliza el método de construcción tradicional "Bundler", que empaqueta todos los módulos en uno o más archivos de paquete y utiliza técnicas como la división de código y la carga diferida para optimizar el rendimiento de la carga.
servidor de desarrollo
Vite utiliza un servidor de desarrollo basado en módulos ES, que aprovecha el soporte nativo del navegador para módulos ES para lograr un rápido inicio en frío y actualizaciones en caliente durante el proceso de desarrollo. Cuando Vite inicia el servidor de desarrollo, generará y proporcionará dinámicamente las dependencias de cada módulo según sea necesario, en lugar de crear las dependencias de toda la aplicación por adelantado como el paquete web.
Webpack también proporciona un servidor de desarrollo, pero se basa en el método de construcción tradicional, que requiere que todos los módulos se empaqueten en archivos de paquete por adelantado, y luego estos archivos se obtienen a través de solicitudes HTTP en el navegador.
Velocidad de construcción
Debido a que Vite aprovecha la capacidad nativa del navegador para admitir módulos ES y adopta el método de construcción "ESM nativo", es más rápido que webpack durante los arranques en frío y las actualizaciones en caliente. Vite puede analizar y compilar módulos dinámicamente en el navegador sin tener que reconstruir la aplicación completa cada vez que se modifica el código como lo hace webpack.
Webpack puede ser lento al crear aplicaciones grandes porque necesita analizar y procesar una gran cantidad de dependencias de módulos y generar los archivos de paquete correspondientes.
ecosistema
webpack es una herramienta de compilación madura con un gran ecosistema y una amplia compatibilidad con complementos. Puede manejar varios tipos de archivos de recursos y proporciona muchos complementos potentes para optimizar y ampliar el proceso de compilación.
Vite es relativamente nuevo y tiene un ecosistema relativamente pequeño, pero se puede integrar con bibliotecas y herramientas de compilación existentes, como Rollup y webpack, y los complementos de webpack existentes se pueden usar para ampliar la funcionalidad de Vite.
Método de inicio del servicio y complejidad de uso.
Webpack empaqueta el paquete primero y luego inicia el servidor de desarrollo, Vite inicia el servidor de desarrollo directamente y luego compila los archivos dependientes según sea necesario.
La complejidad de usar vite está entre Parcel y Webpack. Solo expone una cantidad muy pequeña de elementos de configuración e interfaces de complementos. No es tan inflexible en la configuración como Parcel, ni necesita comprender el enorme cargador y la ecología de complementos como Webpack.Es flexible.Moderado, de complejidad moderada.
Para obtener más puntos técnicos relacionados con el front-end de Vue, preste atención a la cuenta pública: publicaciones posteriores de CTO Plus . Si tiene alguna pregunta, deje un mensaje en segundo plano para comunicarse.
¿Cuáles son las ventajas de vite en comparación con webpack (por qué elegir vite)?
A continuación, explicaré por qué elegí Vite como herramienta de construcción para proyectos front-end.
Aunque webpack es una poderosa herramienta de compilación, en algunos escenarios, Vite puede ser más adecuado como herramienta de compilación para proyectos front-end. Estas son algunas de las ventajas de elegir Vite:
Antes de que los navegadores admitieran los módulos ES, JavaScript no proporcionaba un mecanismo nativo para que los desarrolladores desarrollaran de forma modular. Por eso estamos familiarizados con el concepto de "empaquetado": usar herramientas para rastrear, procesar y concatenar nuestros módulos de código fuente en archivos que se pueden ejecutar en un navegador.
Sin embargo, a medida que comenzamos a crear aplicaciones cada vez más grandes, la cantidad de código JavaScript con el que debemos lidiar aumenta exponencialmente. Los proyectos grandes que contienen miles de módulos son bastante comunes. Las herramientas desarrolladas basadas en JavaScript comenzarán a encontrar cuellos de botella en el rendimiento: a menudo lleva mucho tiempo (¡incluso minutos!) iniciar el servidor de desarrollo, e incluso usando el reemplazo de módulo en caliente (HMR), los efectos de las modificaciones de archivos tardarán varios segundos en reflejarse. en el navegador. En este ciclo, la retroalimentación lenta afectará en gran medida la eficiencia del desarrollo y la felicidad de los desarrolladores.
Vite tiene como objetivo resolver los problemas anteriores aprovechando los nuevos desarrollos en el ecosistema: los navegadores están comenzando a admitir módulos ES de forma nativa y cada vez más herramientas JavaScript están escritas en lenguajes compilados.
el servicio de invitaciones comienza más rápido
Inicio del servicio extremadamente rápido: utilice archivos ESM nativos, ¡no se requiere embalaje!
Debido a que Vite aprovecha la capacidad del navegador para admitir módulos ES de forma nativa y adopta el método de construcción "ESM nativo", el servidor Vite se inicia más rápido que el paquete web. Dado que Vite no necesita empaquetarse cuando se inicia, no es necesario analizarlo. Dependencias del módulo y compilación. El inicio es muy rápido. Cuando el navegador solicita un módulo, el módulo se compila. Este modo de compilación dinámica bajo demanda acorta en gran medida el tiempo de compilación. Cuando el proyecto es más grande y hay más archivos, las ventajas de desarrollo de Vite se vuelven más obvias.
Cuando se empaqueta el paquete web, primero debe rastrear y crear toda la aplicación antes de poder proporcionar servicios. Entonces, para proyectos grandes, generalmente toma unos minutos ejecutar npm run server, e incluso las actualizaciones en caliente demoran incluso unos segundos.
Vite mejora el tiempo de inicio del servidor de desarrollo al separar los módulos de la aplicación en dependencias y código fuente al principio .
Las dependencias son en su mayoría JavaScript puro que no cambia durante el desarrollo. Algunas dependencias más grandes (como bibliotecas de componentes con cientos de módulos) también son costosas de manejar. Las dependencias suelen existir en múltiples formatos modulares (como ESM o CommonJS).
El código fuente a menudo contiene archivos que no son directamente JavaScript y deben transformarse (como componentes JSX, CSS o Vue/Svelte) y, a menudo, se editan. Al mismo tiempo, no es necesario cargar todo el código fuente al mismo tiempo (como los módulos de código basados en la división de rutas).
En Vite, las dependencias se crearán previamente utilizando esbuild, que está escrito en Go y es entre 10 y 100 veces más rápido que las dependencias preconstruidas con un empaquetador escrito en JavaScript. El código fuente son los componentes comerciales .vue, archivos .ts, etc. escritos en nuestro código. Está en forma de esmodule. Por un lado, el navegador puede analizar directamente el esmodule. Por otro lado, podemos usar importación dinámica y carga diferida de rutas, solo cuando la ruta salta a la página correspondiente antes de cargar los recursos de la página.
Vite proporciona código fuente en modo ESM nativo. Básicamente, esto permite que el navegador se haga cargo de parte del trabajo del empaquetador: Vite solo necesita transformarse cuando el navegador solicita el código fuente y lo entrega bajo demanda. El código se importa dinámicamente según el contexto, es decir, solo se procesará cuando realmente se use en la pantalla actual.
La actualización en caliente del servicio Vite es más rápida
Recarga en caliente ligera y rápida: reemplazo de módulo en caliente (HMR) siempre extremadamente rápido, independientemente del tamaño de la aplicación.
La actualización en caliente de Vite es más rápida que el paquete web. En términos de HRM, vite permite que el navegador vuelva a solicitar el módulo cuando cambia el contenido de un módulo, en lugar de volver a compilar todas las dependencias del módulo como el paquete web.
En Vite, la HMR se realiza en el ESM nativo. Al editar un archivo, Vite solo necesita desactivar exactamente el enlace entre el módulo editado y su límite HMR más cercano (la mayoría de las veces solo el módulo en sí), lo que permite que HMR siempre se actualice rápidamente independientemente del tamaño de la aplicación.
Vite también utiliza encabezados HTTP para acelerar las recargas de páginas completas (nuevamente permitiendo que el navegador haga más por nosotros): las solicitudes del módulo fuente negociarán el caché de acuerdo con 304 No modificado, mientras que las solicitudes del módulo dependiente pasarán por Cache-Control: max -age = 31536000, inmutable realiza un almacenamiento en caché sólido, por lo que una vez almacenados en caché no será necesario volver a solicitarlos.
Por lo tanto, es muy rápido en arranque en frío y actualización en caliente. Esto es muy beneficioso para escenarios donde el código se modifica con frecuencia durante el proceso de desarrollo y puede mejorar la eficiencia del desarrollo.
Funciones ricas
Compatibilidad inmediata con TypeScript, JSX, CSS y más.
Para obtener más puntos técnicos relacionados con el front-end de Vue, preste atención a la cuenta pública: publicaciones posteriores de CTO Plus . Si tiene alguna pregunta, deje un mensaje en segundo plano para comunicarse.
Construcción optimizada
El paquete acumulativo preconfigurado se compila en modos opcionales de "Aplicación de varias páginas" o "Biblioteca"
complemento universal
Comparta la interfaz del complemento Rollup-superset entre el desarrollo y la compilación.
API completamente escrita
API flexible y escritura completa en TypeScript.
Fácil de usar y configuración simplificada
Vite es fácil de usar. Simplemente ejecute el comando de inicialización para obtener un entorno de desarrollo preestablecido. Hay un montón de funciones disponibles listas para usar, que incluyen: preprocesamiento de CSS, preprocesamiento de HTML, carga asincrónica, subempaquetado, compresión, HMR, etc.
La configuración de Vite es relativamente simple y no requiere archivos de configuración complejos como webpack. En la mayoría de los casos, Vite puede implementar requisitos de compilación comunes mediante convenciones y configuraciones predeterminadas.
Desarrollo modular
Vite admite la sintaxis nativa del módulo ES y puede ejecutar código modular directamente en el navegador sin empaquetar todos los módulos en un archivo como lo hace webpack. Esto es muy conveniente para desarrollar y depurar código modular.
Compatible con bibliotecas y herramientas de compilación existentes
Vite se puede integrar con bibliotecas y herramientas de compilación existentes, y los complementos de paquetes web existentes se pueden utilizar para ampliar la funcionalidad de Vite. De esta manera, puede disfrutar de la experiencia de desarrollo que ofrece Vite mientras conserva las configuraciones de compilación y los complementos existentes en los proyectos existentes.
En general, Vite tiene ventajas obvias en experiencia de desarrollo y velocidad de construcción, y es adecuado para proyectos front-end pequeños y medianos. Para proyectos grandes, webpack sigue siendo una opción poderosa y madura. La elección de Vite o webpack depende de las necesidades y características del proyecto.
Referencias
Vite sitio web chino https://vitejs.cn/
Documentación oficial de Vite: https://cn.vitejs.dev/
Visita: https://cn.vitejs.dev/guide/why.html#footnote-1
Gran columna de front-end
https://blog.csdn.net/zhouruifu2015/category_5734911 
https://blog.csdn.net/zhouruifu2015/category_5734911 Columna de Node.js
Más información· Busque [CTO Plus] en la cuenta pública de WeChat y sígalo para obtener más información. Aprendamos y comuniquemos juntos.
Para obtener una descripción de la cuenta pública, visite el siguiente enlace
Lectura recomendada: