📦 Import Cost

🛠️ Installation

1. Ouvrez VS Code.
2. Accédez aux extensions (Ctrl+Shift+X).
3. Recherchez Import Cost.
4. Installez l'extension publiée par Wix.

📘 Fonctionnalités

L'extension affiche en temps réel :

• la taille du package importé ;
• la taille compressée (gzip) ;
• un code couleur selon la taille :
  • vert : < 100 KB ;
  • jaune : entre 100 KB et 500 KB ;
  • rouge : > 500 KB.

📘 Exemples

// Petit import (vert dans l'extension)
import _ from "lodash-es"; // 24.7 KB gzipped

// Import moyen (jaune)
import moment from "moment"; // 329 KB gzipped

// Gros import (rouge)
import { Observable } from "rxjs"; // 622 KB gzipped

⚡ Astuces d'optimisation

Utilisez des imports réellement compatibles avec le tree-shaking :

// À éviter : charge le package CommonJS complet
import * as lodash from "lodash";

// Préférer : version ESM, mieux tree-shakable
import { map, filter } from "lodash-es";

// Ou importer uniquement le module nécessaire
import map from "lodash/map";
import filter from "lodash/filter";

Privilégiez aussi les alternatives plus légères :

// Lourd
import moment from "moment";

// Plus léger
import dayjs from "dayjs";

Utilisez les imports dynamiques pour le code splitting :

const module = await import("./heavy-module");

Cette extension vous aide à maintenir une application performante en surveillant la taille de vos dépendances. C'est particulièrement utile pour les applications web où la taille du bundle est critique pour les performances.