Catégories
Astuces et Design

Application des budgets de performance avec Webpack

Comme vous le savez probablement, un seul bundle JavaScript monolithique – autrefois une bonne pratique – n'est plus la voie à suivre pour les applications Web modernes. Des recherches ont montré que les offres groupées plus volumineuses augmentent l'utilisation de la mémoire et les coûts du processeur, en particulier sur les appareils mobiles de milieu de gamme et bas de gamme.

webpack dispose de nombreuses fonctionnalités pour vous aider à réaliser des lots plus petits et à contrôler la priorité de chargement des ressources. Le plus convaincant d'entre eux est le fractionnement de code, qui permet de diviser votre code en différents bundles qui peuvent ensuite être chargés à la demande ou en parallèle. Un autre est les conseils de performance qui indiquent quand les tailles de bundle émises dépassent un seuil spécifié au moment de la construction afin que vous puissiez effectuer des optimisations ou supprimer du code inutile.

Le comportement par défaut des builds de production dans Webpack est d'afficher un avertissement lorsqu'une taille d'actif ou un point d'entrée dépasse 250 Ko (244 Ko), mais vous pouvez configurer la manière dont les indicateurs de performances sont affichés et les seuils de taille via le performance objet dans votre webpack.config.js fichier.

Les versions de production émettront un avertissement par défaut pour les actifs de plus de 250 Ko

Nous allons parcourir cette fonctionnalité et comment l'utiliser comme première ligne de défense contre les régressions de performances.

Tout d'abord, nous devons définir un budget personnalisé

Le seuil de taille par défaut pour les actifs et les points d'entrée (où webpack cherche à commencer à créer le bundle) peut ne pas toujours répondre à vos besoins, mais ils peuvent être configurés pour.

Par exemple, mon blog est assez minime et la taille de mon budget est de 50 Ko (48,8 Ko) pour les actifs et les points d'entrée. Voici le paramètre pertinent dans mon webpack.config.js:

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
  }
};

le maxAssetSize et maxEntrypointSize Les propriétés contrôlent respectivement les tailles de seuil des actifs et des points d'entrée, et elles sont toutes deux définies en octets. Ce dernier garantit que les bundles créés à partir des fichiers répertoriés dans le entry objet (généralement des fichiers JavaScript ou Sass) ne dépassent pas le seuil spécifié tandis que le premier applique les mêmes restrictions sur les autres actifs émis par webpack (par exemple, images, polices, etc.).

Montrons une erreur si les seuils sont dépassés

L'avertissement par défaut de webpack est émis lorsque les seuils budgétaires sont dépassés. C'est assez bon pour les environnements de développement mais insuffisant lors de la construction pour la production. Nous pouvons plutôt déclencher une erreur en ajoutant le hints propriété à la performance objet et le paramétrer sur 'error':

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
    hints: 'error',
  }
};
Une erreur est maintenant affichée à la place d'un avertissement

Il existe d'autres valeurs valides pour le hints propriété, y compris 'warning' et false, où false désactive complètement les avertissements, même lorsque les limites spécifiées sont empiétées. Je ne recommanderais pas d'utiliser false en mode production.

Nous pouvons exclure certains actifs du budget

webpack applique des seuils de taille pour chaque type d'actif qu'il émet. Ce n’est pas toujours une bonne chose, car une erreur sera générée si tout des actifs émis dépassent la limite spécifiée. Par exemple, si nous configurons Webpack pour traiter les images, nous obtiendrons une erreur si un seul d'entre eux franchit le seuil.

Les budgets de performances de webpack et les erreurs de limite de taille d'élément s'appliquent également aux images

le assetFilter La propriété peut être utilisée pour contrôler les fichiers utilisés pour calculer les indices de performances:

module.exports = {
  performance: {
    maxAssetSize: 50000,
    maxEntrypointSize: 50000,
    hints: 'error',
    assetFilter: function(assetFilename) {
      return !assetFilename.endsWith('.jpg');
    },
  }
};

Cela indique à Webpack d'exclure tout fichier qui se termine par un .jpg extension lorsqu’il exécute les calculs d’indices de performances. Il est capable d'une logique plus complexe pour répondre à toutes sortes de conditions d'environnements, de types de fichiers et d'autres ressources.

La génération est maintenant réussie, mais vous devrez peut-être rechercher une autre façon de contrôler la taille de vos images.

Limites

Bien que cela ait été une bonne solution de travail pour moi, une limitation que j'ai rencontrée est que les mêmes seuils budgétaires sont appliqués à tous les actifs et points d'entrée. En d'autres termes, il n'est pas encore possible de définir plusieurs budgets selon les besoins, comme des limites différentes pour les fichiers JavaScript, CSS et image.

Cela dit, il existe une demande d'extraction ouverte qui devrait supprimer cette limitation, mais elle n'est pas encore fusionnée. Certainement quelque chose à surveiller.

Conclusion

Il est si utile de définir un budget de performance et d'en appliquer un avec Webpack vaut la peine d'être pris en compte au début de tout projet. Il attirera l'attention sur la taille de vos dépendances et vous encouragera à rechercher des alternatives plus légères lorsque cela est possible pour éviter de dépasser le budget.

Cela dit, la budgétisation axée sur la performance ne s'arrête pas là! La taille des éléments n'est qu'une chose parmi tant d'autres qui affectent les performances. Il reste donc encore du travail à faire pour garantir une expérience optimale. Exécuter un test Lighthouse est une excellente première étape pour en savoir plus sur d'autres mesures que vous pouvez utiliser ainsi que des suggestions d'améliorations.

Merci d'avoir lu et bon codage!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *