Pré-bundling de dépendance #

Lorsque vous lancez vite pour la première fois, vous pouvez remarquer ce message :

Pré-regroupement des dépendances :
  react
  react-dom
(ceci ne sera exécuté que si vos dépendances ou votre configuration ont changé)

Le pourquoi #

C'est Vite qui effectue ce que nous appelons le "pré-regroupement des dépendances". Ce processus a deux objectifs :

1. Compatibilité CommonJS et UMD: Pendant le développement, le dev de Vite sert tout le code en ESM natif. Par conséquent, Vite doit d'abord convertir les dépendances qui sont livrées sous forme de CommonJS ou UMD en ESM.

   Lors de la conversion des dépendances CommonJS, Vite effectue une analyse intelligente des importations afin que les importations nommées vers les modules CommonJS fonctionnent comme prévu, même si les exportations sont attribuées dynamiquement (par exemple, React) :

   js

   // fonctionne comme prévu
   import React, { useState } from 'react'
   

2. Performance: Vite convertit les dépendances ESM avec de nombreux modules internes en un seul module pour améliorer les performances de chargement de la page suivante.

   Certains paquets fournissent leurs modules ES sous forme de plusieurs fichiers séparés qui s'importent les uns les autres. Par exemple, lodash-es a plus de 600 modules internes ! Lorsque nous faisons import { debounce } from 'lodash-es', le navigateur lance plus de 600 requêtes HTTP en même temps ! Même si le serveur n'a aucun problème à les traiter, le grand nombre de demandes crée une congestion du réseau du côté du navigateur, ce qui ralentit sensiblement le chargement de la page.

   En regroupant lodash-es en un seul module, nous n'avons plus besoin que d'une seule requête HTTP !

Découverte automatique des dépendances #

Si un cache existant n'est pas trouvé, Vite va parcourir votre code source et découvrir automatiquement les importations de dépendance (c'est-à-dire les "importations nues" qui attendent d'être résolues à partir de node_modules) et utiliser ces importations trouvées comme points d'entrée pour le pré-bundle. Le pré-bundling est effectué avec esbuild, donc c'est typiquement très rapide.

Après que le serveur ait déjà démarré, si une nouvelle importation de dépendance est rencontrée qui n'est pas déjà dans le cache, Vite relancera le processus de dep-bundling et rechargera la page.

Monorepos et dépendances liées #

Dans une configuration monorepo, une dépendance peut être un paquet lié du même repo. Vite détecte automatiquement les dépendances qui ne sont pas résolues à partir de node_modules et traite le dep lié comme du code source. Il ne tentera pas d'empaqueter le paquet lié, et analysera la liste des dépendances du paquet lié à la place.

Cependant, cela nécessite que la dep liée soit exportée en tant que ESM. Sinon, vous pouvez ajouter la dépendance à optimizeDeps.include et build.commonjsOptions.include dans votre configuration.

export default defineConfig({
  optimizeDeps : {
    inclure : ['linked-dep']
  },
  build : {
    commonjsOptions : {
      include : [/linked-dep/, /node_modules/]
    }
  }
})

Lorsque vous apportez des modifications au dépôt lié, redémarrez le serveur de développement avec l'option de ligne de commande --force pour que les modifications prennent effet.

Personnalisation du comportement #

L'heuristique de découverte des dépendances par défaut n'est pas toujours souhaitable. Dans les cas où vous voulez explicitement inclure/exclure des dépendances de la liste, utilisez les options de configuration optimizeDeps.

Un cas typique d'utilisation de optimizeDeps.include ou optimizeDeps.exclude est lorsque vous avez une importation qui n'est pas directement découvrable dans le code source. Par exemple, l'import est peut-être créé à la suite d'une transformation de plugin. Cela signifie que Vite ne sera pas en mesure de découvrir l'importation lors de l'analyse initiale - il ne peut la découvrir qu'après que le fichier soit demandé par le navigateur et transformé. Cela entraînera le re-bundle immédiat du serveur après son démarrage.

Les deux include et exclude peuvent être utilisés pour gérer ce problème. Si la dépendance est grande (avec beaucoup de modules internes) ou est CommonJS, alors vous devriez l'inclure ; Si la dépendance est petite et est déjà valide ESM, vous pouvez l'exclure et laisser le navigateur la charger directement.

Mise en cache #

Cache du système de fichiers #

Vite met en cache les dépendances pré-assemblées dans node_modules/.vite. Il détermine s'il a besoin de ré-exécuter l'étape de pré-regroupement en se basant sur quelques sources :

• La liste dependencies dans votre package.json.
• Les fichiers de verrouillage du gestionnaire de paquets, par exemple package-lock.json, yarn.lock, ou pnpm-lock.yaml.
• Champs pertinents dans votre vite.config.js, s'il y en a.

L'étape de pré-bundling n'aura besoin d'être ré-exécutée que si l'un des éléments ci-dessus a changé.

Si pour une raison quelconque, vous voulez forcer Vite à relier les deps, vous pouvez soit démarrer le serveur de développement avec l'option de ligne de commande --force, soit supprimer manuellement le répertoire cache node_modules/.vite.

Cache du navigateur #

Les demandes de dépendances résolues sont fortement mises en cache avec les en-têtes HTTP max-age=31536000,immutable pour améliorer les performances de rechargement des pages pendant le dev. Une fois mises en cache, ces demandes n'atteindront plus jamais le serveur de développement. Elles sont automatiquement invalidées par la requête de version jointe si une version différente est installée (comme indiqué dans le fichier de verrouillage de votre gestionnaire de paquets). Si vous souhaitez déboguer vos dépendances en effectuant des modifications locales, vous pouvez le faire :

1. Désactiver temporairement le cache via l'onglet Réseau de votre navigateur devtools ;
2. Redémarrer le serveur de développement Vite avec le drapeau --force pour ré-assembler les deps ;
3. Rechargez la page.