Tabla de contenido
Comparación entre webpack y vite
Diagrama de flujo de inicio de Webpack y Vite en el sitio web oficial
Comparación del tiempo de inicio entre proyectos webpack y vite
Crear directamente usando una línea de comando adicional
Inicie el proyecto usando vscode
Nota: Lo que se crea aquí es el proyecto vue3+vite.
¿Por qué usar Vite?
En comparación con webpack, vite se inicia más rápido.
Comparación entre webpack y vite
Instrucciones de análisis
Vite utiliza dependencias prediseñadas de esbuild, que están escritas en Go y son más rápidas que las dependencias prediseñadas del empaquetador escritas en JavaScript.
Cuando se inicia el paquete web, analizará las dependencias, luego lo compilará y empaquetará, y finalmente lo entregará al servidor local para su renderización. Por lo tanto, cuantos más módulos tenga un proyecto, más dependencias tendrá y más lento será su inicio.
Incluso si se utiliza la actualización de módulo en caliente (HMR), a medida que aumenta la cantidad de módulos, el tamaño del paquete de archivos empaquetado aumentará, lo que reducirá la velocidad de respuesta.
Cuando se inicia Vite, el servidor de desarrollo se iniciará primero y, cuando se soliciten módulos, también se compilarán dinámicamente y se mostrarán según demanda.
Debido a que los navegadores modernos admiten de forma nativa ES-Module, automáticamente realizarán solicitudes a módulos dependientes.
Por lo tanto, Vite utiliza los archivos del módulo en el entorno de desarrollo como archivos de ejecución del navegador, en lugar de empaquetarlos como un paquete web y entregarlos al servidor local.
En resumen, Vite necesita empaquetar archivos en paquetes de archivos cuando se inicia, por lo que no es necesario analizar las dependencias entre módulos y solo compila el contenido de un determinado módulo cuando es necesario.
Al cambiar un módulo, no es necesario compilar el módulo y los módulos dependientes una vez como el paquete web, por lo que la eficiencia de la actualización en caliente será mayor.
Diagrama de flujo de inicio de Webpack y Vite en el sitio web oficial
paquete web:
rápidamente:
Comparación del tiempo de inicio entre proyectos webpack y vite
Crear proyecto
Crear paso a paso
1. Utilice el comando npm create vite@latest
2. ¿Está bien continuar? (y)
3. Ingrese el nombre del proyecto ?Nombre del proyecto: »vite-project
4. Elige un marco
5. Seleccione idioma
Capturas de pantalla de todo el proceso:
Crear directamente usando una línea de comando adicional
Utilice opciones de línea de comando adicionales para especificar directamente el nombre del proyecto y la plantilla que desea usar, de la siguiente manera:
Comando de la versión npm 6.x:
npm crea vite@latest my-vue-app --template vue
npm es el comando para la versión 7 o superior:
npm crea vite@latest my-vue-app -- --template vue
El proceso de ejecución es el siguiente:
Inicie el proyecto usando vscode
Nota: Vite debe instalarse antes de ejecutar el proyecto por primera vez; de lo contrario, se informará un error.
Reinicie el proyecto después de ejecutar el comando npm install:
Interfaz después del inicio:
Enlace al sitio web oficial
Si quieres conocer más detalles, puedes consultar la web oficial:
Sitio web oficial de vue3: https://cn.vuejs.org/
sitio web oficial de la invitación: https://vitejs.cn/