« Mon projet n’est pas encore prêt à s’éloigner du webpack et à gérer les problèmes de migration. »
« Je veux accélérer la construction de mon projet sans avoir à déraciner complètement Webpack. »
Si l’une des déclarations ci-dessus s’applique à vous, veuillez considérer esbuild-loader plug-in pour webpack. Ce petit plugin astucieux utilise essentiellement les incroyables vitesses de transpilation qui esbuild des offres. esbuild-loader est un remplacement direct de (babel-loader/ts-loader) dans votre pipeline de build webpack.
Qu’est-ce qu’ESBuild ?
esbuild est un bundle JavaScript écrit en GO langue et offre une transpilation ESNext et tapuscrit ultra-rapide.
- Go fonctionne mieux que JS en raison de son simultanéité maquette et Évolutivité du processeur.
- esbuild est écrit avec performance à l’esprit à partir de zéro.
- esbuild utilise efficacement la mémoire avec parallélisme contrairement à Javascript qui doit sérialiser les données entre les threads.
Temps de construction de Webpack avec Babel Loader
Vous trouverez ci-dessous le temps de construction de production d’un projet de grande taille qui utilise babel-loader pour le transpilage Javascript. De toute évidence, ce projet aurait besoin d’un coup de pouce.
Installation rapide: esbuild-loader
Installons rapidement esbuild-loader et configurer webpack pour l’utiliser.
npm i -D esbuild-loader
Dans ton webpack remplacement du fichier de configuration chargeur de babel avec esbuild-loader comme indiqué ci-dessous. Cartes-source sont automatiquement configurés.
Noter: eslint-loader est obsolète, veuillez le remplacer par plugin eslint-webpack si vous ne l’avez pas déjà fait.
Résultats
Exécutons maintenant le même script de construction avec esbuild-loader
C’est un Diminution de 40 % sur un temps de construction de production qui est un nombre qui ne manquera pas d’attirer l’attention tout en améliorant les performances.
Bien que les résultats puissent varier d’un projet à l’autre, il est clair que esbuild-loader améliore considérablement les temps de construction et lorsqu’il est combiné ESBuildMinifyPlugin pour les builds Webpack de minification JS et CSS peuvent être optimales.
Voici quelques ressources
- Référentiel esbuild-loader : https://github.com/privatenumber/esbuild-loader (assurez-vous de le démarrer !)
- pourquoi esbuild est-il rapide ? https://esbuild.github.io/faq/
Bon piratage !
Source link