Qu'est-ce qui fait grossir un bundle JS, et pourquoi la taille pose-t-elle problème ?

Question

IT Interview Practice · Accepted Answer

Un **bundle** est le JavaScript que votre outil de build empaquette et livre au navigateur. Il grossit principalement à cause des **dépendances**, du **code dupliqué**, et du **fait de livrer du code dont la page n'a pas encore besoin**.

## Ce qui le gonfle

- **Les bibliothèques lourdes** — une seule bibliothèque de dates ou d'icônes peut ajouter des centaines de Ko. Importer tout `lodash` pour une seule fonction tire toute la bibliothèque.
- **Importer tout** au lieu de ce que vous utilisez :

```js
import _ from "lodash";           // ~70 Ko — la bibliothèque entière
import debounce from "lodash/debounce"; // ~2 Ko — juste la fonction dont vous avez besoin
```

- **Pas de code splitting** — toute l'app (chaque route, chaque modale) est regroupée dans un seul fichier chargé au départ.
- **Polyfills et dépendances dupliquées** — deux versions du même paquet embarquées deux fois.

## Pourquoi la taille pose problème

Les octets sont le petit problème ; **parser et exécuter** le JS est le gros. Le navigateur doit télécharger, puis parser, compiler et exécuter chaque octet sur le main thread — et c'est bien plus lent sur un téléphone de milieu de gamme que sur un portable. Le JS lourd retarde l'interactivité et dégrade directement l'**INP** et le **LCP**.

## Pourquoi c'est important

« Ajoute juste la bibliothèque » est la façon dont les apps deviennent lentes sans qu'on s'en aperçoive. Les recruteurs veulent vous voir raisonner sur le *coût par dépendance* et opter pour des imports par fonction, le tree shaking et le code splitting avant que le bundle ne gonfle — d'autant que les téléphones de vos utilisateurs sont bien plus faibles que votre machine de dev.

Ce qui le gonfle

Pourquoi la taille pose problème

Pourquoi c'est important

Questions connexes