Un bundler d'application web est un outil qui va permettre à un développeur de minimiser le nombre de fichiers de dépendances (et donc de requêtes http) et éventuellement de réduire la taille globale de l'application.

Pour se faire, le bundler va prendre le point d'entrée de votre application (par exemple le fichier index.html) et il va regrouper chaque dépendance de même type dans un seul fichier (par exemple main.js et main.css).

Selon sa configuration, le bundler peut effectuer d'autres actions, comme de la transpilation ou de la minification.

En plus de réduire le nombre de fichiers de votre projet pour le déploiement, celà permet aussi à votre application d'être compatible avec un maximum de navigateurs, car tous ne supportent pas les modules JS.

Parcel est donc un bundler dont les avantages sont qu'il est très rapide, et peut fonctionner sans aucune configuration, c'est ce que nous allons découvrir juste après.

Si vous connaissez Webpack, Parcel est une alternative plus récente.

Pour installer Parcel globalement, exécutez la commande suivante :

npm install -g parcel-bundler

Ensuite, prenons l'architecture d'un projet basique comme suit :

index.html
- src/
-- main.js
-- class1.js
-- class2.js
-- css/
--- main.css
--- theme.css
--- button.css
En tenant compte que chaque dépendance Javascript est incluse avec la directive "import" et que chaque dépendance CSS est incluse avec "@import" dans leur fichier 'main' respectifs.

Et étant donné le fichier html suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link rel='stylesheet' type='text/css' href='main.css'>
  </head>
  <body>
    <script src='main.js'>
  </body>
</html>

La seule chose qu'il vous restera à faire, sera de lancer Parcel en mode "production" afin qu'il package votre application et qu'il minifie vos fichiers par la même occasion, avec la commande suivante :

parcel build index.html

Et voilà, votre projet est minifié et ne contiendra que trois fichiers : index.html, main[.*].js et main[.*].css ! Le [.*] correspond au fingerprint du fichier pour rendre le nom unique (et éviter les problèmes de cache).

À noter que le dossier contiendra aussi des fichiers *.map mais qui ne sont pas envoyés par le serveur, ils servent lors du debuggage des fichiers minifiés.

Pour plus d'informations, je vous laisse consulter la documentation officielle de Parcel :

Parcel
Blazing fast, zero configuration web application bundler

Si vous voulez minifier votre code sans passer par un bundler d'application comme Parcel ou Webpack, vous pouvez regarder du côté de Gulp qui propose des plugins de minification !

J'espère que cet article vous aura plu, et à bientôt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage de d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par MealPro sur Unsplash