Police de sous-ensemble génial pour améliorer les performances

Font Awesome est une bibliothèque populaire d'icônes, mais elle peut facilement conduire à de mauvaises performances dans la façon dont il est utilisé. En sélectionnant Font génial par sous-ensemble, nous pouvons supprimer tous les glyphes inutilisés du fichier de police. Cela réduira le nombre d'octets transmis par le réseau, améliorant ainsi les performances.

Prenons une sélection de sous-ensemble de polices dans un projet de police impressionnant et voyons quels changements il peut apporter. Dans le processus suivant, je suppose que vous importez le fichier CSS fourni par Font Awesome et que vous utilisez sa police Web pour afficher l'icône.

Paramètres du projet

Pour la démonstration, je n'ai qu'un seul fichier HTML qui importe le fichier CSS de base de Font Awesome. Pour obtenir un échantillon raisonnable d'icônes, j'ai répertorié chaque icône que j'utilise dans un projet parallèle.

Voici à quoi ressemble notre fichier HTML dans le navigateur avant de sélectionner une police dans le sous-ensemble:

Ce qui suit est l'onglet réseau de Devtool, qui affiche le contenu chargé.

Voyons maintenant combien d'octets nécessitent à notre fichier de police pour rendre tout cela.

Référence

Nous voulons voir quelle est la façon la plus directe et la plus performante d'utiliser Font Awesome. En d'autres termes, nous voulons implémenter la solution d'optimisation la plus lente et sans optimisation. J'importe le fichier all.min.css fourni par Font Awesome.

Comme indiqué ci-dessus, la taille du fichier compressé est de 33,4 Ko, ce qui n'est pas mauvais. Malheureusement, les choses ont empiré lorsque nous avons regardé l'onglet Fonts de Devtool.

Bien que les fichiers de police ne soient pas aussi chers que JavaScript pour les navigateurs, ce sont toujours les octets que les navigateurs doivent télécharger, juste pour quelques petites icônes. Considérez que certains de vos utilisateurs peuvent parcourir votre site Web sur les appareils mobiles, rester à l'écart d'une connexion Internet solide ou rapide.

Première tentative avec purifycss

La feuille de styles principale de Font Awesome contient des milliers de définitions d'icônes. Mais que se passe-t-il si nous n'avons besoin que de dizaines d'icônes? Nous pouvons certainement supprimer des choses indésirables?

Il existe de nombreux outils pour analyser votre code et supprimer les styles inutilisés de la feuille de style. Il se trouve que j'utilise PurifyCSS. Bien que cette bibliothèque ne soit plus activement maintenue, sa philosophie est la même et, finalement, ce n'est pas la solution que nous recherchons. Mais voyons ce qui se passe lorsque nous élaguons CSS pour ne contenir que le contenu requis, nous pouvons l'implémenter en utilisant le script suivant:

 <code>const purify = require("purify-css"); const content = ["./dist/**/*.js"]; // Vite 构建的内容purify(content, ["./css/fontawesome/css/all.css"], { minify: true, output: "./css/fontawesome/css/font-awesome-minimal-build.css" });</code>

Lorsque nous chargeons le fichier CSS nouvellement construit, le nombre d'octets CSS que nous transférons sur le réseau a considérablement baissé, de 33 Ko à 7,1 Ko!

Malheureusement, nos autres fichiers de police impressionnants de police n'ont pas changé.

ce qui s'est passé? PurifyCSS fait son travail. Il supprime les règles CSS pour toutes les icônes inutilisées. Malheureusement, il ne peut pas saisir le fichier de police réel pour couper les glyphes, ainsi que les règles CSS.

Ce serait formidable s'il y avait un outil comme PurifyCSS qui pourrait gérer les fichiers de police ...

Outils de sélection des sous-ensembles pour sauver!

Bien sûr, il existe des outils qui peuvent supprimer le contenu inutilisé des fichiers de police, et ils sont appelés outils de sélection des sous-ensembles . L'outil de sélection de sous-ensemble analyse votre page Web, consulte vos fichiers de police et coupe les caractères inutilisés. Il existe de nombreux sous-ensembles d'outils pour sélectionner des polices, telles que le glyphhanger de Zach Leatherman. Il s'avère que Font Awesome est très simple de choisir des sous-ensembles car il est livré avec un outil de sélection de sous-ensemble intégré. Voyons.

Police de sélection des sous-ensembles automatique

Mon prochain outil de sélection automatique des sous-ensembles et de sous-ensemble manuelle nécessite un abonnement Pro Font Awesome Pro.

Font Awesome vous permet de configurer ce qu'on appelle une boîte à outils , qui est décrite dans la documentation de police impressionnante comme «un sac à dos qui peut facilement mettre toutes les icônes et le contenu merveilleux dont vous avez besoin dans un package propre et léger qui vous permet de l'ajouter facilement à votre projet.» Ainsi, au lieu d'importer tous les fichiers CSS, la boîte à outils vous fournit une qui peut être ajoutée au fichier HTML

La balise de script unique d'où la boîte à outils envoie uniquement les glyphes de police dont vous avez réellement besoin dans le fichier de police. Il faut environ une minute pour créer une boîte à outils. Vous obtiendrez une balise de script similaire à ceci:

<code></code>

Lorsque le script se charge, nous n'avons plus de fichiers CSS du tout, tandis que les fichiers JavaScript ne sont que de 4KB. Regardons à nouveau l'onglet des polices Devtools pour voir quels fichiers de police sont chargés après avoir effectué des sélections de sous-ensembles.

Nous sommes passés de 757 Ko à 331 Ko. Réduit de plus de 50% . Mais nous pouvons toujours faire mieux, surtout si nous ne rendons que 54 icônes. C'est là que l'outil de sélection des sous-ensembles manuels de Font Awesome de Font Awesome entre en jeu.

Police de sélection des sous-ensembles manuels

Ne serait-ce pas génial si Font Awesome nous donnait un outil qui nous permet de sélectionner l'icône exacte que nous voulons et de lui fournir une version personnalisée? Oui, ils l'ont fait. Pour une raison quelconque, ils n'ont pas été le battage médiatique, mais ils ont en fait une application de bureau dédiée à la sélection manuelle des polices. L'application peut être téléchargée à partir de leur site Web - cependant, comme l'outil de sélection automatique des sous-ensembles, cette application nécessite un abonnement impressionnant de police payante à utiliser.

Recherchez l'icône, sélectionnez la série, ajoutez ce que vous voulez et cliquez sur le grand bouton de construction bleue. C'est vraiment tout le travail que vous devez faire pour générer un sous-ensemble personnalisé d'icône de police impressionnante.

Après avoir cliqué sur le bouton, Font Awesome lui demandera où il devrait enregistrer la version personnalisée, puis il videra un fichier zip avec tout ce dont vous avez besoin. En fait, la structure que vous obtiendrez est exactement la même chose qu'un téléchargement normal de police, ce qui rend les choses particulièrement simples. Bien sûr, il vous permet d'enregistrer votre version personnalisée en tant que fichier de projet afin que vous puissiez le rouvrir plus tard pour ajouter ou supprimer les icônes au besoin.

Nous ouvrirons Devtools pour voir la taille finale de l'icône que nous chargeons, mais d'abord, regardons le fichier de police lui-même. Les versions personnalisées créent de nombreux types différents, selon ce que votre navigateur utilise. Concentrons-nous sur le fichier .woff2, qui est celui chargé de Chrome. Les mêmes fichiers légers, réguliers, duotone, solides et de marque qui existaient auparavant, mais cette fois, aucune d'entre elles n'est supérieure à 5kb ... et c'est avant qu'elles ne soient compressées par GZIP!

Et les fichiers CSS? Il se rétrécit à seulement 8 Ko. Après compression en utilisant GZIP, il n'a que 2 Ko!

Voici les statistiques finales de Devtools:

Avant de partir, si vous vous demandez si l'outil de GUI de sous-ensemble de police de bureau a une CLI qui peut s'intégrer à CI / CD pour générer ces fichiers au moment de la construction, la réponse n'est pas encore. J'ai envoyé un e-mail à la police du personnel génial et ils ont dit qu'ils planifiaient. S'il est publié, cela permettra aux utilisateurs de simplifier leur processus de construction.

Comme vous pouvez le voir, il est très cool d'utiliser des outils comme FONT génial pour afficher les icônes. Mais l'utilisation par défaut n'est pas toujours le meilleur moyen de le faire pour votre projet. Pour obtenir la plus petite taille de fichier possible, la sélection des polices pour un sous-ensemble est quelque chose que nous pouvons faire pour couper ce dont nous n'avons pas besoin et pour fournir uniquement ce dont nous avons besoin. C'est la performance que nous voulons, surtout en ce qui concerne le chargement des polices, qui sont traditionnellement difficiles à gérer.

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!