Performa
Halaman ini menjelaskan bagaimana paket memengaruhi ukuran bundle dan biaya runtime, serta cara merender banyak ikon.
Cara ikon dimuat dan dijalankan
- Satu modul per ikon. Modul ikon bebas efek samping, sehingga bundler membuang ikon yang tidak Anda impor. Setelah diperkecil dan dikompresi dengan gzip, ikon React atau Vue pertama menambah sekitar 4 KB, termasuk runtime bersama, dan setiap ikon berikutnya sekitar 0,6 KB.
- Markup yang sudah dirender. Pose diam dikirim sebagai string, jadi tidak perlu perhitungan sebelum render pertama, baik di server maupun di browser.
- Gerakan sesuai kebutuhan. Kode gerakan hanya berjalan saat ikon bergerak dan berhenti saat gerakan selesai.
- Kode bersama. Semua ikon berbagi satu modul geometri, dan semua ikon animasi berbagi satu runtime, sehingga browser dan CDN menyimpan kode itu di cache sekali saja.
- Warna CSS. Mengubah warna satu halaman ikon cukup dengan satu perubahan CSS dan tidak merender ulang ikon.
Set ikon besar
Setiap ikon memakai filter SVG untuk bayangan dan sorotannya. Jika Anda menampilkan ratusan ikon, render hanya baris yang terlihat, atau gunakan file SVG statis dalam tag <img>, yang dirasterisasi browser sekali saja.
Impor langsung
Dev server sering memuat seluruh indeks paket, yang merujuk ke setiap ikon. Untuk menghindarinya, impor setiap ikon dari filenya sendiri:
ts
import Folder from "kubai-icons-react/icons/folder";