Metal grinding wheel with sparks, Kiefer Likens on Unsplash Metal grinding wheel with sparks, Kiefer Likens on Unsplash

Réduire la taille du bundle highlight.js avec Webpack

Avec ses 176 langages et ses 79 styles disponibles, highlight.js est certainement la librairie javascript de coloration syntaxique la plus complète.

Cependant, les versions non personnalisables de highlight.js et leur taille importante compliquent son utilisation pour obtenir des sites web performants. Si nous importons l'intégralité de la librairie, la taille de notre bundle minifié va exploser pour atteindre un poids d'environ 500 Ko.
Inutile de charger tous ces langages. Nous allons créer notre sélection et Webpack va nous aider.

installation de la librairie

On installe highlight.js avec npm.

$ npm i highlight.js --save-dev

On importe la librairie dans le fichier index.js ou autre fichier javascript utilisé comme « entrypoint » par Webpack.

import hljs from "highlight.js/lib/highlight";

Sélection des langages

Pour charger notre sélection de langages, on utilise la fonction registerLanguage fournie par l'api highlight.js.

hljs.registerLanguage("css", require("highlight.js/lib/languages/css"));
hljs.registerLanguage(
"javascript",
require("highlight.js/lib/languages/javascript")
);
// etc ...

Enfin on utilise la fonction de l'api initHighlightingOnLoad pour que la librairie soit chargée à l’événement onLoad de la page.

hljs.initHighlightingOnLoad();

Résultat après génération

...
[10:19:47] Version: webpack 4.20.2
Built at: 2018-10-05 10:19:47
Asset Size Chunks Chunk Names
index.42a9e0.js 10.9 KiB 0 [emitted] index
vendors-d90d15e1.f135fc.js 85.3 KiB 1 [emitted] vendors-d90d15e1
vendors-ce790cf7.30bab0.js 29 KiB 2 [emitted] vendors-ce790cf7
Entrypoint index = vendors-ce790cf7.30bab0.js vendors-d90d15e1.f135fc.js index.42a9e0.js
...

Après génération, on constate que le chunk n°2 (vendors-ce790cf7.30bab0.js) qui intègre uniquement highlight.js avec 10 langages sélectionnés ne pèse que 29 Ko.
Avec Webpack Chart on peut obtenir une représentation graphique de notre bundle.

Webpack chart

Liens