Introduction à Parcel, un bundler d'application facile et rapide !

Minifier votre projet en quelques minutes !

Article publié le 29/03/2021, dernière mise à jour le 19/09/2023

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

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 !

MealPro sur Unsplash

Vous avez terminé l'article ?

Aucun commentaire pour l'instant