Présentation d’esbuild

Voyons comment nous pouvons augmenter les performances en utilisant un bundle JavaScript moderne et extrêmement rapide : esbuild.

Le rythme de l’innovation dans la communauté JavaScript est fou. Il y a des années, qui aurait pu imaginer que JavaScript pourrait devenir un langage de programmation qui ouvrirait un tel monde de possibilités ? Web, natif, jeux, serveurs, IoT – nous pouvons créer presque n’importe quoi en utilisant JavaScript, et tout cela grâce à l’innovation au sein de la communauté et à la technologie elle-même.

Des tonnes de frameworks et de bibliothèques ont été publiés, ce qui augmente les possibilités de ce qui peut être fait en utilisant JavaScript, nous aidant à créer des applications plus fiables, flexibles et composables. Avec toutes ces possibilités, ils ont apporté certains inconvénients, et la complexité en fait partie.

Ce n’est pas nouveau que le développement JavaScript devient de plus en plus complexe. Chaque jour, les applications s’appuient davantage sur des bibliothèques tierces, font un usage intensif de projets open source et créent des expériences Web incroyables.

Les développeurs doivent se soucier d’une tonne d’aspects différents lors de la construction d’un nouveau projet. Quel cadre est la meilleure option pour le cas. Quelle librairie peut être intégrée et aider au développement sur le long terme. Chaque choix peut avoir et aura un impact sur le résultat final de l’application.

Avec toutes les possibilités innovantes qu’il apporte, la quantité de code JavaScript qui s’exécute sur le Web aujourd’hui est énorme. Et un facteur clé pour que l’équilibre complexe d’un projet fonctionne correctement est le processus de le rendre plus rapide et plus léger, et cela peut être fait avec le regroupement.

Le regroupement n’est pas un nouveau concept en vogue dans la programmation informatique, mais en JavaScript, on peut dire que c’est relativement nouveau. Il est devenu un élément indispensable de la création d’applications JavaScript modernes.

Nous allons couvrir ce qu’est exactement esbuild et comment il peut nous aider à créer des applications plus rapides. Voyons comment nous pouvons augmenter les performances en utilisant un bundle JavaScript moderne et extrêmement rapide.

Regroupement en JavaScript

Initialement, les applications JavaScript étaient simplement des fichiers uniques qui contenaient toute la logique nécessaire. C’était petit et simple, et au fur et à mesure que l’application grandissait, plus de fichiers étaient créés.

Aujourd’hui, les applications JavaScript modernes sont construites à l’aide de nombreux fichiers et dossiers. Chacun d’eux a un objectif différent et est créé pour effectuer une tâche spécifique. Nous divisons et organisons tout dans différents dossiers et fichiers, sinon l’application peut devenir un gâchis.

Finalement, la communauté JavaScript a créé des moyens d’organiser le code en « modules ». Imaginez un livre composé de plusieurs chapitres qui, une fois combinés, deviennent le livre. Une application JavaScript comporte plusieurs modules qui, combinés, deviennent l’application.

L’idée derrière l’utilisation de modules est de rendre l’application maintenable. La mise à jour et la maintenance d’un module sont beaucoup plus simples lorsque le module est découplé des autres éléments du code. Il est également idéal pour la réutilisation – un module peut être réutilisé partout où le développeur le souhaite et dans n’importe quelle partie de l’application. Il existe de nombreuses façons d’incorporer des modules dans une application JavaScript moderne. Nous avons le modèle de module,
CommonJS, DMLA, UMDetc.

Vous vous demandez peut-être, Qu’est-ce que les modules ont à voir avec le regroupement? Comment sont-ils liés?

Un bundler est un outil qui prend tout votre code et crée un seul fichier JavaScript en sortie. Il prend tous vos modules dans votre application et les combine en un seul fichier.

Il y a deux raisons pour lesquelles nous devrions utiliser un bundle JavaScript :

• JavaScript n’a pas de système de module intégré.
• Nous pouvons éviter les allers-retours inutiles vers notre serveur. Imaginez une application contenant 10 fichiers. Sinon, le navigateur devrait demander tous les fichiers individuellement.

Le regroupement de code JavaScript est devenu plus facile au fil des ans. Lorsque vous utilisez le bon outil, tout ce que vous avez à faire est de transmettre les fichiers d’entrée que vous souhaitez regrouper et la sortie dans laquelle vous le souhaitez.

Les bundles modernes apportent plus de fonctionnalités que la simple concaténation et la réduction de vos fichiers en un seul fichier. Il a des fonctionnalités telles que le fractionnement de code, la recompilation automatique, les cartes source pour le débogage, etc.

esbuild

esbuild est le nouveau venu sur le bloc qui vise à être un bundler JavaScript extrêmement rapide résolvant à quel point les applications modernes sont actuellement regroupées de manière inefficace.

Il est livré avec d’excellentes fonctionnalités telles que:

L’objectif principal d’esbuild est de rendre le Web plus rapide en général. Les groupeurs aiment webpack peut être très bon pour résoudre les problèmes de regroupement, mais lorsque les choses commencent à évoluer, cela apporte plus de complexité au code, ce qui rend difficile certaines choses.

Pour démarrer avec esbuild, nous pouvons l’installer à l’aide d’une simple commande :

yarn add esbuild

Créons une application React simple et voyons comment esbuild fonctionne en pratique. Nous allons installer React :

yarn add react react-dom

Nous allons avoir un composant simple qui rend un « Bonjour Monde » texte:

import * as React from 'react'
import * as ReactDOM from 'react-dom'


ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Maintenant, nous allons dire à esbuild de regrouper notre projet :

./node_modules/.bin/esbuild app.js --bundle --outfile=out.js

Nous pouvons même passer le paramètre minify et le regrouper pour la production, comme ceci :

./node_modules/.bin/esbuild app.js --bundle --minify --outfile=out.js

Navigateur

Le bundler génère du code pour le navigateur par défaut, mais au cas où nous le voudrions, nous pouvons passer un target argument et spécifiez les navigateurs que nous voulons prendre en charge :

esbuild app.js --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16

Nœud

esbuild peut être bon pour les bibliothèques Node. Bien qu’il s’agisse d’un bundler, ce n’est pas nécessaire lorsque nous travaillons avec Node, mais cela peut être avantageux pour les responsables de bibliothèques qui souhaitent livrer des versions légères et plus rapides.

Le processus de regroupement peut supprimer automatiquement les types TypeScript, convertir la syntaxe du module ECMAScript en CommonJS et transformer la nouvelle syntaxe JavaScript en une syntaxe plus ancienne pour une version spécifique de Node.

esbuild app.js --bundle --platform=node --target=node10.4

Vous avez peut-être entendu parler de termes tels que webpack, Cumul et Colis avant de. Ce sont des bundlers JavaScript modernes qui peuvent être utilisés pour créer des applications modernes. La plupart des bundlers modernes que nous avons peuvent devenir très lents en raison de la quantité de travail qu’ils effectuent.

esbuild vient résoudre les problèmes que ces bundlers n’ont pas encore résolus et rend le processus de regroupement plus rapide et crée un bundler moderne facile à utiliser en cours de route. Alors que d’autres bundlers prennent plusieurs secondes ou minutes pour regrouper une application, esbuild prend quelques millisecondes.

esbuild possède des fonctionnalités étonnantes qui peuvent modifier la vitesse des applications modernes. Une bonne chose à souligner est qu’esbuild est pas encore prêt pour la production.

C’est un petit projet open-source et il a été développé et maintenu par un seul développeur. Cet auteur a dit : « Je ne veux pas diriger un grand projet open source, donc je ne cherche pas de contributions maintenant.

Utiliser esbuild maintenant en production serait un risque et pourrait entraîner des bogues inattendus. Mais l’avenir d’esbuild est prometteur. La vitesse apportée par ce bundle JavaScript est incroyable et différente de tous les autres bundles modernes.

Conclusion

Les bundlers JavaScript sont des outils importants pour le développement Web moderne. Nous les utilisons tous les jours pour effectuer des tâches lourdes, en regroupant tout notre code dans des fichiers uniques pour augmenter les performances.

Gardez un œil sur esbuild, il peut apporter une tonne d’innovation à JavaScript. La vitesse apportée par ce bundle JavaScript est incroyable et différente de tous les autres bundles modernes.

Comme il n’est pas encore prêt pour la production, utiliser esbuild maintenant en production serait risqué et pourrait introduire des bogues en conséquence. Utilisez-le à vos risques et périls pour la construction de petits projets.

Vous voulez en savoir plus ? Plongez au plus profond de documents d’architecture de la façon dont il a été construit. Il pourrait devenir le bundle JavaScript principal lorsqu’il sera prêt pour la production.