Die neueste Version des Svelte-Frameworks verbessert die Leistung durch mehrere neue Funktionen.

Mit der Veröffentlichung seiner neuesten Version, Svelte 4, hat das renommierte JavaScript-Framework für die Entwicklung von Webanwendungen einen großen Schritt nach vorne gemacht. Dieses Update bringt eine Vielzahl spannender Verbesserungen mit sich, wobei der Schwerpunkt auf der Optimierung der Leistung und der Verbesserung des Entwicklererlebnisses liegt.

Kleiner und unabhängiger

Eine der bemerkenswertesten Verbesserungen ist die erhebliche Reduzierung der Gesamtgröße. Von stattlichen 10,6 MB beträgt die Größe von Svelte jetzt deutlich geringere 2,8 MB, was einer beeindruckenden Größenverringerung von 75 % entspricht.

Darüber hinaus ist das Team hinter dem Schlankes JavaScript-Framework hat die Anzahl der Abhängigkeiten von 61 auf 16 reduziert. Diese Reduzierung hat mehrere Vorteile, darunter ein schnelleres REPL-Erlebnis und eine verbesserte Interaktivität Websites und eine bemerkenswert schnellere Ausführung der NPM-Installation, unabhängig vom Paketmanager, den Sie verwenden bevorzugen.

instagram viewer

Über die Optimierung der Packungsgröße hinaus hat Svelte auch den generierten Code für die Flüssigkeitszufuhr verfeinert. Beispielsweise ist der Code für die SvelteKit-Website jetzt 110,2 kB groß (vorher 126,3 kB), was einer Reduzierung um 13 % entspricht.

Verbesserte Entwicklererfahrung

Svelte setzt Übergänge jetzt standardmäßig auf lokal und stellt so sicher, dass sie nicht standardmäßig global sind. Dies minimiert das Risiko einer Beeinträchtigung anderer Übergänge und verhindert Kollisionen beim Laden der Seite, was für ein reibungsloseres Benutzererlebnis sorgt.

Webkomponenten

Das Erstellen von Webkomponenten in Svelte ist jetzt mit der neuen Version ganz einfach Schild:

„meine-Komponente“ />

Während sich dieser Ansatz in einfachen Fällen als einfach anzuwenden erwies, brachte er für fortgeschrittenere Fälle Einschränkungen mit sich Szenarien wie die Steuerung, ob aktualisierte Requisitenwerte im DOM angezeigt werden sollen, oder das Deaktivieren des Schattens DOM.

Svelte 4 hat das Authoring-Erlebnis von Webkomponenten mit der Einführung eines dedizierten customElement-Attributs revolutioniert schlank: Optionen. Mit diesem Attribut können Sie Webkomponenten mit verschiedenen Optionen konfigurieren:

 customElement={{
 Schild: 'benutzerdefiniertes Element',
 Schatten: 'keiner',
 Requisiten: {
 Name: {
 Reflektiert den aktualisierten Wert zurück an das DOM 
 reflektieren: WAHR,
 Spiegelt den Wert als Zahl wider 
 Typ: 'Nummer',


 Name des Attributs 
 Attribut: 'Elementindex'
 }
 }
 }}
/>