Performance
Diese Seite beschreibt, wie sich die Pakete auf Bundle-Größe und Laufzeitkosten auswirken und wie Sie viele Icons rendern.
Wie Icons geladen und ausgeführt werden
- Ein Modul pro Icon. Icon-Module haben keine Seiteneffekte, daher entfernen Bundler Icons, die Sie nicht importieren. Minifiziert und mit gzip komprimiert fügt das erste React- oder Vue-Icon etwa 4 KB hinzu, einschließlich der gemeinsamen Laufzeit, jedes weitere etwa 0,6 KB.
- Vorgerendertes Markup. Die Ruhepose wird als String ausgeliefert und braucht vor dem ersten Rendern keine Berechnung, weder auf dem Server noch im Browser.
- Bewegung bei Bedarf. Der Bewegungscode läuft nur, während sich ein Icon bewegt, und endet mit der Bewegung.
- Gemeinsamer Code. Alle Icons nutzen ein gemeinsames Geometriemodul und alle animierten Icons eine gemeinsame Laufzeit, sodass Browser und CDNs diesen Code nur einmal zwischenspeichern.
- CSS-Farben. Die Farbe einer ganzen Seite voller Icons ändert sich mit einer einzigen CSS-Änderung, ohne dass die Icons neu gerendert werden.
Große Icon-Sets
Jedes Icon verwendet SVG-Filter für Schatten und Glanzlicht. Wenn Sie Hunderte von Icons anzeigen, rendern Sie nur die sichtbaren Zeilen oder verwenden Sie die statischen SVG-Dateien in <img>-Tags, die der Browser nur einmal rastert.
Direkte Importe
Dev-Server laden oft den gesamten Paketindex, der auf jedes Icon verweist. Um das zu vermeiden, importieren Sie jedes Icon aus seiner eigenen Datei:
ts
import Folder from "kubai-icons-react/icons/folder";