perf(iconify): tree-shake MDI to used icons (-99.5% JSON, -71% client bundle)
The previous setup loaded the full @iconify-json/mdi collection (7000+ icons, 2.95 MB) just to render the ~30 icons we actually use, producing a 2.99 MB client chunk. generate-icons.mjs scans src/ for static `icon="mdi:..."` references, extracts a minimal IconifyJSON containing only those icons (plus an EXTRA_ICONS list for dynamic CMS-driven names) from @iconify-json/mdi/icons.json, and writes it to a generated subset file. iconify-offline.ts now registers that subset instead of the full pack. build/client: 5.6 MB -> 1.6 MB (-71%) build/server: 5.3 MB -> 2.4 MB (-55%) largest client chunk: 2.99 MB -> 127 KB (-96%) iconify subset: 2.95 MB -> 15.5 KB (-99.5%) Hooked into predev/prebuild so the subset stays fresh; missing icons fall back to the iconify API at runtime. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,20 @@
|
||||
/**
|
||||
* Iconify Offline: MDI-Collection für Server und Client registrieren.
|
||||
* Muss an zwei Stellen importiert werden (Side-Effect-Import), damit
|
||||
* <Icon icon="mdi:…" /> überall gleich rendert (kein Hydration-Mismatch):
|
||||
* 1. Layout.astro (--- Block) → läuft beim SSR
|
||||
* 2. Header.svelte (oder andere frühe client:load-Komponente) → läuft im Browser
|
||||
* Danach können alle Svelte-Komponenten Icon ohne API nutzen.
|
||||
* Iconify-Subset für MDI-Icons. Statt der kompletten Collection (~3 MB) wird
|
||||
* nur eine generierte Untermenge eingebunden — siehe `scripts/generate-icons.mjs`
|
||||
* und `iconify-mdi-subset.generated.json`. Statisch verwendete Icons werden
|
||||
* automatisch erkannt; Icons aus CMS-Daten / dynamischen Expressions stehen
|
||||
* unter `EXTRA_ICONS` im Generator.
|
||||
*
|
||||
* Side-Effect-Import: an zwei Stellen einbinden, damit SSR und Client-Hydration
|
||||
* dieselbe Collection sehen (kein Hydration-Mismatch):
|
||||
* 1. `+layout.svelte` / `+error.svelte` (top-level import) → Server + Client
|
||||
* 2. überall sonst implizit über das Layout
|
||||
*
|
||||
* Fehlt ein Icon, fällt @iconify/svelte zur Laufzeit auf api.iconify.design
|
||||
* zurück. Lieber `EXTRA_ICONS` ergänzen + neu generieren.
|
||||
*/
|
||||
import { addCollection } from "@iconify/svelte";
|
||||
import { icons as mdiIcons } from "@iconify-json/mdi";
|
||||
import { addCollection } from '@iconify/svelte';
|
||||
import type { IconifyJSON } from '@iconify/types';
|
||||
import mdiSubset from './iconify-mdi-subset.generated.json';
|
||||
|
||||
addCollection(mdiIcons);
|
||||
addCollection(mdiSubset as IconifyJSON);
|
||||
|
||||
Reference in New Issue
Block a user