Por qué elegir Vite
A medida que comenzamos a crear aplicaciones cada vez más grandes, la cantidad de código JavaScript para procesar aumentó exponencialmente. Los grandes proyectos con miles de módulos son bastante comunes. Las herramientas desarrolladas en base a JavaScript comienzan a encontrar cuellos de botella en el rendimiento: por lo general, lleva mucho tiempo (¡incluso minutos!) iniciar el servidor de desarrollo, e incluso con el reemplazo de módulos en caliente (HMR), el efecto de las modificaciones de archivos tarda segundos en aparecer. el navegador. Tal ciclo sigue y sigue, y la retroalimentación lenta afectará en gran medida la eficiencia y la felicidad del desarrollador.
Vite tiene como objetivo resolver los problemas anteriores aprovechando los nuevos desarrollos en el ecosistema: los navegadores comienzan a admitir módulos ES de forma nativa, y cada vez más herramientas de JavaScript se escriben en lenguajes compilados.
Ventajas de Vite
- En el entorno de desarrollo, no se requiere ninguna operación de empaquetado y se puede iniciar en frío rápidamente.
- Hot Reload (HMR) ligero y rápido.
- Verdadera compilación bajo demanda, ya no es necesario esperar a que se compile toda la aplicación. Compilación de paquete web tradicional: cada vez que se ejecuta la compilación, cada ruta se encontrará a través de la entrada de entrada, y luego se cargarán los módulos respectivos de cada ruta, y luego se empaquetarán en un archivo bundle.js, y finalmente se notificará al servidor. la actualización en caliente. Entonces, en otras palabras, espere a que se carguen todos los archivos antes de mostrar la página actualizada == "más lento
- Compilación de Vite: a diferencia de la construcción tradicional, Vite preparará primero la actualización del servidor, luego buscará el archivo de entrada y luego buscará dinámicamente la ruta que se cargará para compilar el módulo bajo esa ruta, similar a la carga bajo demanda, con un menor tamaño total y actualización más rápida.
Proyecto de compilación rápida de Vite-Cli
1. Preparaciones pertinentes
- Vite requiere la versión de Node.js >=12.2.0. Sin embargo, algunas plantillas requieren versiones superiores de Node.js para funcionar, actualice si su administrador de paquetes se lo advierte. Puede administrar varias versiones de Node en la misma máquina mediante n, nvm o nvm-windows. Para obtener información sobre cómo instalar Node.js, consulte nodejs.org. Si no está seguro de qué versión de Node.js se está ejecutando en su sistema, ejecute node -v en una ventana de terminal.
- administrador de paquetes npm Debido a que generalmente usamos el andamiaje proporcionado por Vite para construir la estructura del proyecto, necesitamos descargar e instalar el paquete npm y npm> = 6. , necesita un administrador de paquetes npm. Esta guía utiliza la interfaz de línea de comandos del cliente npm, que se instala de forma predeterminada en Node.js. Para verificar si tiene instalado el cliente npm, ejecute npm -v en una ventana de terminal.
2. Crea un proyecto
1. Creación básica:
use npm:
npm create vite@latest
Usa hilo:
yarn create vite //yarn
Usar pnpm :
pnpm create vite
2. Especifique el nombre del proyecto y la plantilla para usar, por ejemplo, para crear un proyecto de Vite + Vue, ejecute:
//项目名：my-vue-app； 模板：vue
npm crear vite@latest mi - vue - aplicación – plantilla vue // npm 6.x
npm create vite@latest my - vue - app – – template vue //npm 7+
hilo crear vite mi - vue - aplicación - plantilla vue // hilo
pnpm crear vite mi - vue - aplicación – – plantilla vue //pnpm
3. Iniciar el proyecto
Vaya primero a su propio proyecto: cd my-project, luego:
npm install
npm run dev
Por qué elegir Vite
A medida que comenzamos a crear aplicaciones cada vez más grandes, la cantidad de código JavaScript para procesar aumentó exponencialmente. Los grandes proyectos con miles de módulos son bastante comunes. Las herramientas desarrolladas en base a JavaScript comienzan a encontrar cuellos de botella en el rendimiento: por lo general, lleva mucho tiempo (¡incluso minutos!) iniciar el servidor de desarrollo, e incluso con el reemplazo de módulos en caliente (HMR), el efecto de las modificaciones de archivos tarda segundos en aparecer. el navegador. Tal ciclo sigue y sigue, y la retroalimentación lenta afectará en gran medida la eficiencia y la felicidad del desarrollador.
Vite tiene como objetivo resolver los problemas anteriores aprovechando los nuevos desarrollos en el ecosistema: los navegadores comienzan a admitir módulos ES de forma nativa, y cada vez más herramientas de JavaScript se escriben en lenguajes compilados.
Ventajas de Vite
- En el entorno de desarrollo, no se requiere ninguna operación de empaquetado y se puede iniciar en frío rápidamente.
- Hot Reload (HMR) ligero y rápido.
- Verdadera compilación bajo demanda, ya no es necesario esperar a que se compile toda la aplicación. Compilación de paquete web tradicional: cada vez que se ejecuta la compilación, cada ruta se encontrará a través de la entrada de entrada, y luego se cargarán los módulos respectivos de cada ruta, y luego se empaquetarán en un archivo bundle.js, y finalmente se notificará al servidor. la actualización en caliente. Entonces, en otras palabras, espere a que se carguen todos los archivos antes de mostrar la página actualizada == "más lento
- Compilación de Vite: a diferencia de la construcción tradicional, Vite preparará primero la actualización del servidor, luego buscará el archivo de entrada y luego buscará dinámicamente la ruta que se cargará para compilar el módulo bajo esa ruta, similar a la carga bajo demanda, con un menor tamaño total y actualización más rápida.
Proyecto de compilación rápida de Vite-Cli
1. Preparaciones pertinentes
- Vite requiere la versión de Node.js >=12.2.0. Sin embargo, algunas plantillas requieren versiones superiores de Node.js para funcionar, actualice si su administrador de paquetes se lo advierte. Puede administrar varias versiones de Node en la misma máquina mediante n, nvm o nvm-windows. Para obtener información sobre cómo instalar Node.js, consulte nodejs.org. Si no está seguro de qué versión de Node.js se está ejecutando en su sistema, ejecute node -v en una ventana de terminal.
- administrador de paquetes npm Debido a que generalmente usamos el andamiaje proporcionado por Vite para construir la estructura del proyecto, necesitamos descargar e instalar el paquete npm y npm> = 6. , necesita un administrador de paquetes npm. Esta guía utiliza la interfaz de línea de comandos del cliente npm, que se instala de forma predeterminada en Node.js. Para verificar si tiene instalado el cliente npm, ejecute npm -v en una ventana de terminal.
2. Crea un proyecto
1. Creación básica:
use npm:
npm create vite@latest
Usa hilo:
yarn create vite //yarn
Usar pnpm :
pnpm create vite
2. Especifique el nombre del proyecto y la plantilla para usar, por ejemplo, para crear un proyecto de Vite + Vue, ejecute:
//项目名：my-vue-app； 模板：vue