Surcharger la génération des balises img avec Docusaurus

En cherchant de bons trucs et astuces sur Docusaurus quand le nombre d'articles devient important, j'ai lu qu'il fallait faire attention au lazy loading des images et, en effet, par défaut toutes les images sont chargées dès le premier accès à un article de blog.

Dans cet article, nous allons voir à quel point il est facile d'intercepter la création de la balise <img> lorsque le contenu Markdown est converti en HTML.

Cette conversion se produit à deux endroits : quand vous naviguez sur votre site ou quand vous générez une version statique de celui-ci.

Pour faire ça, en fait, pas besoin de créer un composant ! Il suffit d'ajouter quelques lignes de code dans le fichier src/theme/MDXComponents.js. Si vous avez besoin de plus que deux ou trois attributs supplémentaires — un div wrapper, du CSS personnalisé, un effet de zoom — alors un vrai composant s'impose ; c'est le sujet de Modifier la façon dont Docusaurus génère les balises img.

Si vous n'avez pas encore ce fichier, créez-le.

import React from "react";

import MDXComponents from "@theme-original/MDXComponents";?
// [...]

export default {
  // Reusing the default mapping
  ...MDXComponents,?
  // highlight-start
  img: (props) => {?
    const { loading, decoding, className, style, height, width, ...rest } = props;?

    return (
      <img
        {...rest}
        // Make sure to keep "height='auto'" (so also disable width) as generated by Docusaurus
        // We shouldn't display the image at full size
        height='auto'
        width=''
        loading={loading || 'lazy'}?
        decoding={decoding || 'async'}?
        className={`${className || ''}`}?

        // Example of how adding extra CSS
        style={{?
          border: '20px solid #ccc',
          borderRadius: '6px',
          ...style,
        }}
      />
    );
  },
  // highlight-end
  // [...]
};

Une fois l'ajout fait dans votre fichier MDXComponents.js, retournez dans le navigateur ; ouvrez n'importe quel article et rafraîchissez la page. Vous verrez que les images ont maintenant l'attribut loading="lazy" (vous pouvez le vérifier avec le panneau des outils de développement de votre navigateur). Si, comme dans l'exemple donné ci-dessus, vous avez ajouté du style CSS, vous le verrez immédiatement.

Facile, non ?

Maintenant, comment s'assurer que ça reste vrai sur deux cents articles ? En le vérifiant automatiquement : voyez Quelques vérifications sur les images de votre site Docusaurus.