Subset -Schriftart fantastisch, um die Leistung zu verbessern

Font Awesome ist eine beliebte Bibliothek von Ikonen, kann aber leicht zu einer schlechten Leistung in der Art und Weise führen, wie sie verwendet wird. Durch die Auswahl der Schriftart fantastisch durch Teilmenge können wir alle nicht verwendeten Glyphen aus der Schriftart entfernen. Dies verringert die Anzahl der vom Netzwerk übertragenen Bytes und verbessert damit die Leistung.

Nehmen wir eine Schriftartenauswahl in einem fantastischen Schriftprojekt und sehen Sie, welche Änderungen sie vornehmen können. Im folgenden Vorgang gehe ich davon aus, dass Sie die von Font Awesome bereitgestellte CSS -Datei importieren und mit der Web -Schriftart das Symbol angezeigt werden.

Projekteinstellungen

Zur Demonstration habe ich nur eine HTML -Datei, in der die grundlegende CSS -Datei von Schriftart Awesome importiert wird. Um eine angemessene Stichprobe von Symbolen zu erhalten, habe ich jedes Symbol, das ich in einem Seitenprojekt verwende, aufgeführt.

So sieht unsere HTML -Datei im Browser aus, bevor Sie eine Schriftart in der Teilmenge auswählen:

Das Folgende ist die Registerkarte "Netzwerk" von Devtool, auf dem der geladene Inhalt angezeigt wird.

Lassen Sie uns nun sehen, wie viele Bytes es für unsere Schriftart benötigt, um all dies zu rendern.

Benchmarking

Wir möchten sehen, wie die direkteste und schlimmste Art, Schriftart zu verwenden. Mit anderen Worten, wir möchten die langsamste und keine Optimierungslösung implementieren. Ich importiere die von Font Awesome bereitgestellte All.min.css -Datei.

Wie oben gezeigt, beträgt die komprimierte Dateigröße 33,4 KB, was nicht schlecht ist. Leider wurden die Dinge schlimmer, als wir uns die Registerkarte Devtools Schriftarten ansahen.

Obwohl Schriftdateien für Browser nicht so teuer sind wie JavaScript, sind sie immer noch die Bytes, die Browser herunterladen müssen, nur für ein paar kleine Symbole. Bedenken Sie, dass einige Ihrer Benutzer Ihre Website auf Mobilgeräten durchsuchen und sich von einer starken oder schnellen Internetverbindung fernhalten können.

Erster Versuch mit PurifyCSS

Font Awesome's Hauptstylesheet enthält Tausende von Symboldefinitionen. Aber was ist, wenn wir nur Dutzende von Ikonen brauchen? Wir können sicherlich unerwünschte Dinge entfernen?

Es gibt viele Tools, um Ihren Code zu analysieren und ungenutzte Stile aus dem Stylesheet zu entfernen. Ich verwende zufällig PurifyCSS. Obwohl diese Bibliothek nicht mehr aktiv aufrechterhalten wird, ist ihre Philosophie die gleiche und letztendlich nicht die Lösung, nach der wir suchen. Lassen Sie uns jedoch sehen, was passiert, wenn wir CSS so beschneiden, dass wir nur den erforderlichen Inhalt enthalten. Wir können ihn mit dem folgenden Skript implementieren:

 <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>

Wenn wir die neu erstellte CSS -Datei laden, fiel die Anzahl der CSS -Bytes, die wir über das Netzwerk übertragen, erheblich von 33 kb auf 7,1 kb!

Leider haben sich unsere anderen fantastischen Schriftartdateien nicht geändert.

was ist passiert? PurifyCSS erledigt seinen Job. Es wird die CSS -Regeln für alle nicht verwendeten Symbole entfernt. Leider kann die tatsächliche Schriftart nicht eingeben, um die Glyphen sowie die CSS -Regeln zu trimmen.

Es wäre großartig, wenn es ein Tool wie PurifyCSS gäbe, das Schriftdateien verarbeiten könnte ...

Subset -Auswahlwerkzeuge zum Retten!

Natürlich gibt es Tools, mit denen unbenutzte Inhalte aus Schriftartdateien entfernt werden können, und sie werden als Subset -Auswahlwerkzeuge bezeichnet. Das Subset Selection Tool analysiert Ihre Webseite, sieht Ihre Schriftartdateien und die nicht verwendeten Zeichen an. Es gibt viele Teilmengen von Werkzeugen zur Auswahl von Schriftarten, wie z. B. Zach Leathermans Glyphanger. Es stellt sich heraus, dass Font Awesome sehr einfach ausgewählt wird, Teilmengen auszuwählen, da es mit einem integrierten Auswahlwerkzeug der Untergruppe ausgestattet ist. mal sehen.

Automatische Subset -Auswahlschrift

Für mein bevorstehendes Tool für automatische Subset -Auswahl und manuelle Teilmenge sind ein bezahltes Font -Fant -Pro -Abonnement erforderlich.

Mit Font Awesome können Sie ein Toolkit einrichten, das in der Schriftart Fear -Dokumentation als „Rucksack“ beschrieben wird, mit dem alle Symbole und wundervollen Inhalte, die Sie benötigen, in einem sauberen und leichten Paket problemlos einfügen können, das es Ihnen erleichtert, es Ihrem Projekt hinzuzufügen. “ Anstatt alle CSS -Dateien zu importieren, bietet Ihnen das Toolkit eine, die der HTML -Datei hinzugefügt werden kann

Das einzelne Skript -Tag, von dem das Toolkit nur die Schriftglyphen sendet, die Sie tatsächlich aus der Schriftart benötigen. Es dauert ungefähr eine Minute, um ein Toolkit zu erstellen. Sie erhalten ein ähnliches Skript -Tag wie folgt:

<code></code>

Wenn das Skript geladen wird, haben wir jetzt überhaupt keine CSS -Dateien, während die JavaScript -Dateien nur 4 KB sind. Schauen wir uns die Registerkarte DevTools -Schriftarten erneut an, um festzustellen, welche Schriftartdateien nach dem Erstellen einiger Teilmengenauswahlen geladen sind.

Wir sind von 757 kb auf 331 kb gefallen. Um mehr als 50% reduziert . Aber wir können es immer noch besser machen, besonders wenn wir nur 54 Ikonen rendern. Hier kommt das manuelle Auswahlwerkzeug der Schriftart der Schriftart der Schriftart für das Handbuch der Schriftart ein.

Schaltauswahlauswahl Schriftart

Wäre das nicht toll, wenn Font Awesome uns ein Tool geben würde, mit dem wir das genaue Symbol auswählen und es dann mit einem benutzerdefinierten Build bereitstellen können? Ja, sie haben es getan. Aus irgendeinem Grund haben sie dies nicht übertroffen, aber sie haben tatsächlich eine Desktop -App, die sich der manuellen Teilmenge ausgewählt hat. Die App kann von ihrer Website heruntergeladen werden. Wie das automatische Subset -Auswahltool benötigt diese App jedoch ein kostenpflichtiges Abonnement für eine fantastische Schriftart.

Suchen Sie das Symbol, wählen Sie die Serie aus, fügen Sie das hinzu, was Sie möchten, und klicken Sie auf die Schaltfläche "Large Blue Build ". Dies ist wirklich die ganze Arbeit, die Sie erledigen müssen, um eine benutzerdefinierte Teilmenge an fantastischer Schrift zu generieren.

Nach dem Klicken auf die Schaltfläche wird Font Awesome gefragt, wo es den benutzerdefinierten Build speichern soll, und dann wird eine ZIP -Datei mit allem, was Sie benötigen, abgelegt. Tatsächlich ist die Struktur, die Sie erhalten, genau der gleiche wie ein normaler fantastischer Download, was die Dinge besonders einfach macht. Natürlich können Sie Ihren benutzerdefinierten Build als Projektdatei speichern, damit Sie es später wieder eröffnen können, um Symbole nach Bedarf hinzuzufügen oder zu entfernen.

Wir werden Devtools öffnen, um die endgültige Größe des Symbols zu sehen, das wir laden, aber sehen wir uns zunächst die tatsächliche Schriftart selbst an. Benutzerdefinierte Builds erstellen viele verschiedene Typen, je nachdem, was Ihr Browser verwendet. Konzentrieren wir uns auf die .WOFF2 -Datei, die von Chrome geladen wird. Das gleiche Licht-, reguläre, Duotone-, solide und Markendateien, die bisher existierten, aber diesmal ist keiner von ihnen größer als 5 KB ... und dies ist, bevor sie von GZIP komprimiert werden!

Wie wäre es mit CSS -Dateien? Es schrumpft auf nur 8 KB. Nach der Komprimierung mit GZIP hat es nur 2 KB!

Hier sind die endgültigen Statistiken in Devtools:

Bevor wir gehen, wenn Sie sich fragen, ob das GUI -Tool des Desktop -Schriftarts über eine CLI verfügt, die sich in CI/CD integrieren kann, um diese Dateien zum Zeitpunkt der Erstellung zu generieren, ist die Antwort noch nicht. Ich schickte das großartige Mitarbeiter der Schriftart per E -Mail und sie sagten, sie hätten geplant. Wenn es veröffentlicht wird, können Benutzer ihren Erstellungsprozess vereinfachen.

Wie Sie sehen können, ist es sehr cool, Tools wie Font Awesome zum Anzeigen von Symbolen zu verwenden. Die Standardnutzung ist jedoch nicht immer der beste Weg, dies für Ihr Projekt zu tun. Um die kleinstmögliche Dateigröße zu erhalten, können wir das Auswählen von Schriftarten für eine Teilmenge tun, um das zu schneiden, was wir nicht benötigen, und nur das zu liefern, was wir brauchen. Das ist die Leistung, die wir wollen, insbesondere wenn es darum geht, Schriftarten zu laden, die traditionell schwer zu handhaben sind.

Das obige ist der detaillierte Inhalt vonSubset -Schriftart fantastisch, um die Leistung zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!