Appliquer les budgets de performance avec webpack

Les applications Web modernes ne comptent plus sur un seul énorme package JavaScript. La recherche montre que les packages plus importants augmentent l'utilisation de la mémoire et la charge du processeur, en particulier sur les appareils mobiles à faible et intermédiaire. WebPack fournit plusieurs fonctionnalités pour réduire la taille des packages et contrôler les priorités de chargement des ressources, dont les plus importantes sont la segmentation du code et les conseils de performances. La segmentation du code divise le code en plusieurs packages, le chargement à la demande ou en parallèle; Les conseils de performances détectent si la taille du package dépasse le seuil spécifié lors de la construction, afin d'optimiser ou de supprimer le code inutile.

WebPack par défaut, les avertissements sont émis lorsque la taille de la ressource ou le point d'entrée dépasse 250 Ko (244KIB), mais vous pouvez configurer comment et les seuils de taille des invites de performance sont affichés via performance dans le fichier webpack.config.js . Cet article décrira comment utiliser cette fonctionnalité comme la première ligne de défense pour empêcher la dégradation des performances.

Personnalisez votre budget

Les seuils de taille de ressource et de point de saisie par défaut peuvent ne pas correspondre toujours à vos besoins, mais peuvent être configurés. Par exemple, un petit blog peut avoir un budget de 50 Ko (48,8 kib) chacune des ressources et des points d'entrée. Les paramètres pertinents dans webpack.config.js sont les suivants:

 module.exports = {
  performance: {
    MaxAssetSize: 50000,
    MaxentrypointSize: 50000,
  }
};

maxAssetSize et maxEntrypointSize contrôlent respectivement la taille du seuil (en octets) du point de ressource et de l'entrée. maxEntrypointSize garantit que les packages créés à partir de fichiers répertoriés dans entry (généralement des fichiers JavaScript ou SASS) ne dépassent pas le seuil spécifié; maxAssetSize applique les mêmes restrictions sur les autres ressources générées par WebPack (telles que les images, les polices, etc.).

Une erreur apparaît lorsque le seuil est dépassé

WebPack émet un avertissement lorsque le seuil budgétaire est dépassé par défaut. Cela suffit pour l'environnement de développement, mais pas pour l'environnement de production. Vous pouvez déclencher une erreur en ajoutant hints à l'objet performance et en le définissant à 'error' :

 module.exports = {
  performance: {
    MaxAssetSize: 50000,
    MaxentrypointSize: 50000,
    Astuces: «erreur»,
  }
};

D'autres valeurs valides pour hints sont 'warning' et false . false désactivera complètement l'avertissement, même si la limite spécifiée est dépassée. Il n'est pas recommandé d'utiliser false en mode de production.

Exclure certaines ressources

WebPack applique un seuil de taille pour chaque type de ressource qu'il génère. Si une ressource dépasse la limite spécifiée, une erreur sera lancée. Par exemple, si WebPack est configuré pour traiter les images, une erreur se produira tant que l'une des images dépasse le seuil.

assetFilter peut être utilisée pour contrôler les fichiers utilisés pour calculer les invites de performances:

 module.exports = {
  performance: {
    MaxAssetSize: 50000,
    MaxentrypointSize: 50000,
    Astuces: «erreur»,
    AssetFilter: fonction (AssetFileName) {
      return! AssetFileName.endswith ('. JPG');
    },
  }
};

Cela indique à WebPack d'exclure tous les fichiers se terminant par .jpg lors de l'exécution des calculs d'invite de performances. Il peut utiliser une logique plus complexe pour répondre aux conditions de divers environnements, types de fichiers et autres ressources.

limite

Une limitation actuelle est que le même seuil budgétaire s'applique à toutes les ressources et points d'entrée. En d'autres termes, plusieurs budgets ne sont pas encore définis au besoin, comme la définition de différentes restrictions pour JavaScript, CSS et les fichiers image. Cependant, il existe déjà des demandes de traction ouvertes qui devraient supprimer cette restriction.

Résumer

Il est utile de configurer et d'appliquer les budgets de performance au début du projet. Cela vous rappellera de faire attention à la taille de vos dépendances et de vous encourager à trouver des alternatives plus légères pour éviter un budget.

Mais le budget de performance ne s'arrête pas là! La taille des ressources n'est que l'un des nombreux facteurs qui affectent les performances, donc plus de travail est encore nécessaire pour garantir que la meilleure expérience est fournie. La gestion des tests de phare est un excellent moyen de comprendre d'autres mesures et suggestions d'amélioration.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!