Optimiser les performances de StoryBook

Comment la configuration de Webpack permet d’améliorer les performances de Storybook

Storybook est un super outil pour afficher des composants graphiques, nul besoin de rappeler ce qu’il fait.

Néanmoins, lorsque vous commencez à avoir beaucoup de composants, celui-ci devient de plus en plus long à compiler ainsi qu’à s’afficher la faute au poids du JavaScript généré.

Dans sa documentation, Storybook permet de customiser la configuration Webpack.
La mise en place des chunks de Webpack vous permettra de découper en petits fichiers les composants via l’extension de la configuration :

module.exports = {
    // ...your settings
    webpackFinal: async (config) => {
        config.optimization = {
            splitChunks: {
                chunks: "all",
                maxSize: 1024 * 244, // 244KB
            }
        };
        // Return the altered config
        return config;
    }
};

De cette manière, au lieu d’avoir un fichier dépassant les 1Mo, vous allez en avoir plusieurs qui seront téléchargés par le navigateur lorsque nécessaire.
La compilation sera plus aisé pour Webpack, et la navigation au sein de votre Storybook sera visiblement plus fluide.

Webpack Alias

Une autre méthode pour build plus rapidement est d’utiliser des alias de webpack pour éviter la mise en mémoire de composants dupliqués.
Exemple : sur un de nos storybook, nous utilisons une librairie d’icônes qui est assez volumineuse, celle-ci pouvant se retrouver dans plusieurs composants, en ajoutant un alias comme ci-dessous :

module.exports = {
    // ...your settings
    webpackFinal: async (config) => {
        config.resolve.alias['@mygroup/icons'] = path.join(__dirname, '../node_modules/@mygroup/icons');
        // Return the altered config
        return config;
    }
};

Nous avons divisé par 2 le temps de build voir même résolu des crashs mémoire de NodeJS dans notre CI.

Sans
info => Manager built (14 s)
info => Preview built (2.87 min)
Avec
info => Manager built (14 s)
info => Preview built (1.25 min)

Notez le risque que si vos composants tirent cette dépendance mais qu’elle n’est pas à jour, vous aurez une différence entre le vrai composant et celui visible dans Storybook.
En effet, cela implique d’installer cette dépendance à la racine de votre projet.