Mission

Mission : dégonfler un bundle de 3.8 Mo

Diagnostiquer pourquoi un module admin et une librairie entière finissent dans le bundle initial, puis corriger avec import() dynamique et un import nommé ESM.

Contexte

Le fichier main.js d'une application de gestion contient ceci :

import _ from "lodash";
import { PanneauAdmin } from "./admin.js";

document.querySelector("#recherche").addEventListener("input", _.debounce(lancerRecherche, 300));

if (utilisateurEstAdmin()) {
    PanneauAdmin.afficher();
}

Le bundle de production pèse 3.8 Mo alors que 95% des visiteurs ne sont jamais admin, et que _.debounce est la seule fonction de lodash réellement utilisée dans tout le projet.