Η πιο πρόσφατη έκδοση του πλαισίου Svelte βελτιώνει την απόδοση με πολλές νέες δυνατότητες.
Με την κυκλοφορία της πιο πρόσφατης έκδοσής του, Svelte 4, το αναγνωρισμένο πλαίσιο JavaScript για την ανάπτυξη εφαρμογών Ιστού έχει κάνει ένα σημαντικό βήμα προς τα εμπρός. Αυτή η ενημέρωση φέρνει μια σειρά από συναρπαστικές βελτιώσεις, με κύρια εστίαση στη βελτιστοποίηση της απόδοσης και στη βελτίωση της εμπειρίας προγραμματιστή.
Μικρότερο και πιο Ανεξάρτητο
Μία από τις πιο αξιοσημείωτες βελτιώσεις είναι η σημαντική μείωση του συνολικού μεγέθους. Από τα βαριά 10,6 MB, το μέγεθος του Svelte είναι τώρα πολύ πιο λεπτό 2,8 MB, μια εντυπωσιακή μείωση 75% σε μέγεθος.
Επιπλέον, η ομάδα πίσω από το Λεπτό πλαίσιο JavaScript έχει εξορθολογίσει τον αριθμό των εξαρτήσεων από 61 σε 16. Αυτή η μείωση έχει πολλαπλά πλεονεκτήματα, συμπεριλαμβανομένης της ταχύτερης εμπειρίας REPL, της βελτιωμένης διαδραστικότητας ιστοσελίδες και αξιοσημείωτα ταχύτερη εκτέλεση της εγκατάστασης npm, ανεξάρτητα από τον διαχειριστή πακέτων που έχετε προτιμώ.
Πέρα από τη βελτιστοποίηση μεγέθους συσκευασίας, η Svelte έχει επίσης βελτιστοποιήσει τον κώδικα που δημιουργεί για ενυδάτωση. Για παράδειγμα, ο κώδικας για τον ιστότοπο SvelteKit είναι τώρα 110,2 kB από 126,3 kB, μείωση 13%.
Βελτιωμένη εμπειρία προγραμματιστή
Το Svelte ορίζει τώρα τις μεταβάσεις σε τοπικό από προεπιλογή, διασφαλίζοντας ότι δεν είναι καθολικές από προεπιλογή. Αυτό ελαχιστοποιεί τον κίνδυνο παρεμβολής με άλλες μεταβάσεις και αποτρέπει τις συγκρούσεις κατά τη φόρτωση της σελίδας, παρέχοντας μια πιο ομαλή εμπειρία χρήστη.
Στοιχεία Ιστού
Η δημιουργία στοιχείων Web στο Svelte είναι πλέον απλή με τη χρήση του νέου ετικέτα:
"το συστατικό μου" /> Ενώ αυτή η προσέγγιση έχει αποδειχθεί εύκολη στη χρήση σε απλές περιπτώσεις, έθετε περιορισμούς για πιο προχωρημένους σενάρια όπως ο έλεγχος εάν οι ενημερωμένες τιμές prop θα πρέπει να αντικατοπτρίζονται στο DOM ή η απενεργοποίηση της σκιάς DOM.
Το Svelte 4 έφερε επανάσταση στη συγγραφική εμπειρία των Web Components με την εισαγωγή ενός αποκλειστικού χαρακτηριστικού customElement στο σβέλτο: επιλογές. Αυτό το χαρακτηριστικό σάς επιτρέπει να διαμορφώσετε τα στοιχεία Web με διάφορες επιλογές:
customElement={{
ετικέτα: "προσαρμοσμένο στοιχείο",
σκιά: 'κανένας',
στηρίγματα: {
όνομα: {
Αντανακλά την ενημερωμένη τιμή πίσω στο DOM
κατοπτρίζω: αληθής,Αντικατοπτρίζει την τιμή ως αριθμός
τύπος: 'Αριθμός',Ονομάστε of το χαρακτηριστικό
Χαρακτηριστικό: 'στοιχείο-δείκτη'
}
}
}}
/>
