הגרסה החדשה ביותר של מסגרת Svelte משפרת את הביצועים עם מספר תכונות חדשות.

עם שחרורו של הגרסה האחרונה שלה, Svelte 4, מסגרת ה-JavaScript המהוללת לפיתוח אפליקציות אינטרנט עשתה צעד גדול קדימה. עדכון זה מביא שורה של שיפורים מרגשים, עם דגש עיקרי על אופטימיזציה של ביצועים ושיפור חוויית המפתח.

קטן ועצמאי יותר

אחד השיפורים הבולטים ביותר הוא ההפחתה המשמעותית בגודל הכולל. מ-10.6 מגה-בייט נכבדים, הגודל של Svelte הוא כעת 2.8 מגה-בייט דק בהרבה, ירידה מרשימה של 75% בגודל.

בנוסף, הצוות שמאחורי מסגרת JavaScript Svelte ייעל את מספר התלות מ-61 ל-16. להפחתה זו יש יתרונות מרובים, כולל חוויית REPL מהירה יותר, אינטראקטיביות משופרת אתרי אינטרנט, וביצוע מהיר להפליא של התקנת npm, ללא קשר למנהל החבילות שאתה לְהַעֲדִיף.

מעבר לאופטימיזציה של גודל החבילה, Svelte גם כיוונה עדין את הקוד שהיא מייצרת עבור הידרציה. לדוגמה, הקוד של אתר SvelteKit הוא כעת 110.2 קילובייט מ-126.3 קילובייט, ירידה של 13%.

חווית מפתחים משופרת

Svelte מגדירה כעת מעברים למקומיים כברירת מחדל, ומבטיחה שהם אינם גלובליים כברירת מחדל. זה ממזער את הסיכון להפרעה במעברים אחרים ומונע התנגשויות במהלך טעינת העמוד, ומספק חווית משתמש חלקה יותר.

instagram viewer

רכיבי אינטרנט

יצירת רכיבי אינטרנט ב-Svelte היא כעת פשוטה באמצעות החדש תָג:

"הרכיב שלי" />

בעוד שגישה זו הוכיחה את עצמה קלה לשימוש במקרים פשוטים, היא הציבה מגבלות למתקדמים יותר תרחישים כמו שליטה אם ערכי אב מעודכנים צריכים להשתקף ב-DOM או השבתת הצל DOM.

Svelte 4 חוללה מהפכה בחוויית הכתיבה של רכיבי אינטרנט עם הצגת תכונת customElement ייעודית ב- svelte: אפשרויות. תכונה זו מאפשרת לך להגדיר את רכיבי האינטרנט עם אפשרויות שונות:

 customElement={{
 תָג: 'אלמנט מותאם אישית',
 צֵל: 'אף אחד',
 אביזרים: {
 שם: {
 משקף את הערך המעודכן בחזרה ל-DOM 
 משקף: נָכוֹן,
 משקף את הערך כ מספר 
 סוּג: 'מספר',


 שם של התכונה 
 תְכוּנָה: 'אלמנט-אינדקס'
 }
 }
 }}
/>