El proyecto vite cambia ramas de diferentes dependencias y ejecuta la solución al problema de carga lenta (dependencias previas al empaquetado)

prefacio

Cuando usamos yarn devel comando vite, o cambiar de rama, cuando cambian las dependencias , encontraremos que el proyecto inicia bastante lento, unos diez minutos, y la terminal de la consola imprime la siguiente información:

Dependencias previas a la agrupación:

esto se ejecutará solo cuando sus dependencias o configuración hayan cambiado

Cuando se encuentra con esta situación, es realmente bastante desagradable. A veces, el proyecto tarda media hora en comenzar y completarse, lo que es realmente una pérdida de tiempo.

De hecho, el motivo de la consola se ha indicado muy claramente:

warning package.json: No license field
$ vite
Pre-bundling dependencies: (正在预构建依赖)
  react
  react-dom
  antd
  react-redux
  antd/lib/locale/zh_CN
  (...and 29 more)
(this will be run only when your dependencies or config have changed)(这将只会在你的依赖或配置发生变化时执行)

¡Sobre la importancia de aprender bien inglés! ! !

Una vez que sepa dónde está el problema, puede prescribir el medicamento adecuado y el problema se resolverá de manera rápida y adecuada.

1. Motivo: dependencias preconstruidas

En primer lugar, comprendamos por qué debe hacerse durante vitela ejecución 预构建依赖.

1. Compatibilidad con CommonJS y UMD: durante la fase de desarrollo, el servidor de desarrollo de Vite trata todo el código como módulos ES nativos . Por lo tanto, Vite primero debe convertir las dependencias publicadas como CommonJS o UMD a ESM.

Al traducir las dependencias de CommonJS, Vite realiza un análisis de importación inteligente para que las importaciones por nombre se comporten como se espera, incluso si las exportaciones se asignan dinámicamente (como React). Por ejemplo:

// 符合预期
import React, {
    
     useState } from 'react' 

2. Rendimiento: Vite convierte las dependencias de ESM con muchos módulos internos en un solo módulo para mejorar el rendimiento de carga de la página posterior.

Algunos paquetes importan sus compilaciones de módulos ES entre sí como muchos archivos separados. Por ejemplo: lodash-es hay más de 600 módulos incorporados. import { debounce } from lodash-esCuando ejecutamos , el navegador envía más de 600 solicitudes HTTP al mismo tiempo, aunque el servidor no tiene problemas para procesar estas solicitudes, una gran cantidad de solicitudes provocará una congestión de la red en el lado del navegador, lo que hará que la velocidad de carga de la página sea bastante lenta. .

Al preconstruirlo lodash-escomo un módulo, solo necesitamos una solicitud HTTP.

Nota:
La compilación previa de dependencias solo se aplicará en el modo de desarrollo y se usará para esbuildconvertir las dependencias en módulos ESM, en las compilaciones de producción se usará@rollup/plugin-commonjs

Después de que el servidor se haya iniciado, si se encuentra una nueva importación de dependencia y esta dependencia aún no está en el caché, Vite volverá a ejecutar el proceso de creación de dependencia y recargará la página. Esta es la razón por la que el proyecto se ejecuta muy lentamente después de cambiar de rama bajo diferentes dependencias.

Para obtener más detalles, consulte el sitio web oficial de Vite

2. Soluciones

Dependencias requeridas:

• vite-plugin-optimizar-persistir
• vite-plugin-paquete-config

usar:

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

Configurar en vite.config.ts:

// vite.config.ts

import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

export default defineConfig({
    
    
	plugins: [
		PkgConfig(),
        OptimizationPersist(),
	]
})

El código de configuración se insertará automáticamente en el archivo package.json: