Comment améliorer les performances de construction de webpack / babel sans utiliser la fonction de surveillance?
Je travaille sur un projet web SBT/Scala et je voulais profiter des fonctionnalités ES6 et de la nouvelle syntaxe de module pour la couche JavaScript frontend. SBT a son propre système de build et j'ai réussi à Tweak un plugin sbt existant pour exécuter webpack pour construire mes fichiers JS en utilisant babel. La solution actuelle est un peu désordonnée mais elle fonctionne et vit dans le système de construction sbt.
Le problème est que c'est lent. Pour chaque modification, une nouvelle instance de webpack est créée et il compile tout à partir de zéro.
Je sais que je pourrais sortir du système de construction sbt et juste pour la phase de développement, utiliser webpack séparément pour regarder et reconstruire mes fichiers. Mais avant de le faire, je me demandais s'il y avait des moyens d'accélérer le processus de construction du webpack.
J'ai vérifié la documentation et il me semble que toute mise en cache disponible est gérée uniquement en mémoire et n'est pas applicable à mon cas. Ou existe-t-il une sorte de cache de fichiers qui survivrait entre des exécutions distinctes de la construction du webpack? Par exemple, toutes mes dépendances npm ne changeront pas la plupart du temps, donc elles pourraient être compilées une fois, mises en cache puis simplement incluses ...
Quelques configurations à considérer:
- module.loaders include - Vous devez définir
includepour pointer vers votre source. Par défaut, il traversera tout (node_modulesen particulier est lent). Assurez-vous de l'avoir réglé - resol.unsafeCache
- module.noParse
- Activer babel-loader la mise en cache -
loader: 'babel?cacheDirectory'. - alias déjà construit, bibliothèques minifiées
- future - cache - Cela pourrait fonctionner n jour . Malheureusement, il n'y a pas encore de bonne façon de sérialiser les données du cache.
Le problème est que c'est lent. Pour chaque modification, une nouvelle instance de webpack est créée et il compile tout à partir de zéro.
Nous avons rencontré ce même problème lorsque notre base de modules a pris de l'ampleur (3,5 k +), où le webpack prendrait jusqu'à 80 secondes sur un MacBook 13 normal pour effectuer la initiale construire.
L'approche que nous avons adoptée a consisté à paralléliser la phase de transformation (chargeurs Webpack, essentiellement) qui a permis de gagner jusqu'à 500% en termes de temps de construction sur certaines machines. Consultez https://github.com/amireh/happypack pour le plugin et voyez si cela peut fonctionner pour vous.
Il ne prend pas encore en charge tous les chargeurs, mais babel-loader est pris en charge et je pense que c'est ce dont vous avez besoin.
Webpack a une fonctionnalité qui vous permettra de créer des "DLL" (aussi appelés "ensembles de bibliothèques") que vous pourrez compiler, une fois, séparément de votre code d'application principal.
Un flux de travail typique avec cela serait de placer toutes les bibliothèques volumineuses et peu changeantes dans un ensemble de bibliothèques fournisseur que vous compilez une fois, puis créez un ensemble d'applications beaucoup plus petit pour votre propre code.
J'ai écrit un article sur la façon de le faire ici: https://robertknight.me.uk/posts/webpack-dll-plugins/
Parmi les suggestions de @ bebraw ci-dessus, je voudrais souligner en particulier 1) l'aliasing des bibliothèques minifiées existantes au lieu de les inclure dans le bundle - ce qui offre les mêmes avantages que la création de bundles de bibliothèques et 2) Si vous utilisez un transpilateur, il est important que le transpiler n'est exécuté que sur votre propre code via les options module.loaders.(include|exclude), pas tout le code de la bibliothèque dans node_modules/