Webpack 5 (Laravel Mix v6) - Temps de (re)compilation vraiment très long

Bonjour à tous, je viens demander de l’aide SVP :

J’ai récupéré un projet Laravel / Vue.js.

Ce projet utilise Webpack pour la compilation JS.

Ça utilise Laravel Mix v6 (qui lui même a comme dépendance Webpack 5). Donc ça utilise la dernière version.

J’ai un gros souci : c’est le temps de la compilation, et surtout le temps de recompilation à chaque fois que je fais CTRL+S (pour sauvegarder un fichier).

Pour la première compilation, c’est parfois normal (sur des gros projets) d’attendre quelques dizaines de secondes pour que la compilation se termine. Mais par contre, attendre (environ) + de 30 secondes à chaque recompilation (à chaque fois que je CTRL+S pour sauvegarder un fichier JS) c’est totalement ingérable. Ça multiplie mon temps de développement (et pas que d’un peu…).

SVP, avez-vous déjà vu un problème de ce genre ? Avez-vous une/des pistes à me suggérer ?

Aussi, dans mon terminal, une fois que la recompilation est terminée, ça m’affiche : "✔ Compiled Successfully in 476ms". Sauf que ça n’a pas mis que 476ms à recompiler, j’ai bien attendu (environs) 30 secondes avant de voir mon terminal afficher ce message (et donc avant que la recompilation se termine).

Pourquoi une telle différence entre ce retour un terminal et ce que j’attends ?

Edit (PS) :

Sur mon PC j’ai un autre projet (bien + gros que celui-ci, et avec bien + de fichiers JS/Vue.js et + volumineux en poids).

Cet autre projet utilise exactement la même version de Webpack que celui-ci comme projet (la version précise: Laravel Mix v6.0.49). La recompilation met en moyenne 2540ms (ce qui est déjà considéré comme "long", même si c’est gérable), ce qui est très loin des 30 secondes qu’il faut attendre avec ce projet (et avec ce projet qui me pose problème, je compile seulement 2 fichiers JS…).

Voici un extrait de mon package.json :

  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },

Et pour compiler/recompiler, j’utilise la commande : npm run watch

Merci d’avance.

Hello,

Je dirais de commencer par analyser les fichiers réellement inclus (y compris les dépendances). Le package webpack-bundle-analyzer peut t’aider en générant une réprésentation visuelle des fichiers en fonction de leur poids :

"scripts": {
  "dev:analyze": "npm run development -- --env.addons=bundleanalyzer",
  "build:analyze": "npm run build -- --env.addons=bundleanalyzer"
}

À partir de ça tu pourras déjà voir s’il y a des dépendances à revoir/optimiser.

Je viens de trouver la ligne qui me fait tout ramer.

Mais si je commente (ou supprime) cette ligne, après mon App ne marche plus (ça me dis qu’un X fichier JS n’existe pas…).

Je récap :

A la racine du projet, il y a un fichier webpack.mix.js

Dans ce projet, il y a aussi des Modules, et chaque Module a aussi son fichier webpack.mix.js.

Là je travaille dans un Module spécifique dans le projet (module Finance).

Dans ce Module, il y a donc un fichier : Modules/Finance/resources/assets/js/modals_view/webpack.mix.js

Donc je watch uniquement ce fichier :

npm run watch --file="../Modules/Finance/webpack.mix.js"

Voici le contenu de ce fichier :

const dotenvExpand = require('dotenv-expand');
dotenvExpand(require('dotenv').config({path: '../../.env'/*, debug: true*/}));

const mix = require('laravel-mix');
require('laravel-mix-merge-manifest');

mix.mergeManifest(); // C'est cette ligne !

mix.js(__dirname + '/resources/assets/js/bill/listing.js', 'public/js/bill/listing.js');
mix.js(__dirname + '/resources/assets/js/modals_view/app.js', 'public/js/finance-modals/finance_modals.js');

if (mix.inProduction()) {
    mix.version();
}

Et quand je commente (ou supprime) la ligne où il y a : mix.mergeManifest();

ça compile vite (à une vitesse normale). Mais après mon App ne marche plus (erreur 500: ça me dis qu’un X fichier JS n’existe pas…).

Et pour refaire marcher mon App, je suis d’abord obligé de remettre la ligne mix.mergeManifest();, puis aussi faire un npm run watch….

PS : Car si je refais direct npm run watch —file="../Modules/Finance/webpack.mix.js" étrangement ça ne marche pas. Donc obligé de d’abord faire un npm run watch.

Donc le problème vient visiblement du plugin merge-manifest (plugin que je ne connais pas du tout).

Une idée SVP ?

Edit :

Je viens de voir qu’il y a 3540 lignes dans mon fichier public/mix-manifest.json ça doit peut être venir de ça le problème ?

Ça fait un sacré manifest, mais c’est un fichier généré donc pas sûr que se soit bien grave.

Le plugin en question sert à gérer plusieurs .mix.js, typiquement pour plusieurs environnements, configs ou bundles. https://laravel-mix.com/extensions/merge-manifest

Par contre si la combinaison de manifests est si lente, c’est soit que tu as trop de .mix.js, soit que le plugin est 💩

Du coup, sujé résolu depuis hier matin.

ça venait du fait que le public/mix-manifest.json avait plein de lignes, versionnées.

Mais merci pour vos réponses.