Pourquoi faire un build de site web est devenu indispensable

Réduire le nombre de requêtes au serveur web

Le nombre de fichiers JavaScript (jusqu'a plusieurs dizaines) et css a augmenté ces dernières années. Cela est d'autant plus vrai depuis la saine approche modulaire de vos scripts, qui sont exportés puis importés avant utilisation. Même en parallélisant les requêtes, la lenteur de chargement de vos pages HTML se fera de plus en plus sentir à l'utilisateur si vous laissez ce problème subsister. La solution est simple et rapide : créer une tâche de build qui combine les fichiers JavaScript, par exemple, en un seul fichier.

Réduire la taille des fichiers

Un site web peut désormais faire plusieurs Mo. La minification, en supprimant les espaces, en renommant les fonctions et même en refactorisant pour vous le code peut réduire considérablement la quantité de données transférées entre le serveur web et le navigateur de vos utilsateurs.

Gérer l'ordre des dépendances

Un projet, ne serait-ce que de taille moyenne, peut comporter des dizaines de fichiers JavaScript. L'ordre de ces fichiers est pratiquement toujours imposé par les dépendances entre certains fichiers. Les systèmes de gestion modules (CommonJS, RequireJS, modules ES6) permettent de préciser quel fichier dépend de quels autres sans que l'ordre de dépendance ne devienne un casse tête. Un bon task runner nous dispense ensuite de vérifier nous même les dépendances.

Moteurs JavaScript et nouvelles versions d'ECMAScript

Les nouvelles versions d'ECMAScript (telles qu'ES6/2015 et ES7) apportent des nouveautés très intéressantes qui mettront pour certaines un temps important à être supportées par les navigateurs. Même s'il s'agit essentiellement de sucre syntaxique - et car il s'agit souvent de cela - il est possible de transpiler le code d'ES6 vers ES5 pendant un build. Les transpilers permettent également d'utiliser TypeScript.

Linting

Afin de s'assurer de ne pas oublier de point-virgules ou bien plus grave, le processus de build peut inclure une tâche de code linting.

Grunt, Gulp et désormais Webpack

Après grunt et gulp, webpack monte énormément. Nous auront l'occasion de revenir dessus dans les jours qui viennent.