يعمل الإصدار الأحدث من إطار عمل Svelte على تحسين الأداء بالعديد من الميزات الجديدة.

مع إصدار أحدث إصدار له ، Svelte 4 ، اتخذ إطار JavaScript المشهور لتطوير تطبيقات الويب خطوة كبيرة إلى الأمام. يقدم هذا التحديث مجموعة من التحسينات المثيرة ، مع التركيز بشكل أساسي على تحسين الأداء وتعزيز تجربة المطور.

أصغر وأكثر استقلالية

أحد أهم التحسينات الجديرة بالملاحظة هو التخفيض الكبير في الحجم الكلي. من حجم ضخم يبلغ 10.6 ميجابايت ، أصبح حجم Svelte الآن أقل نحافة بكثير وهو 2.8 ميجابايت ، مما يمثل انخفاضًا مذهلاً في الحجم بنسبة 75٪.

بالإضافة إلى ذلك ، فإن الفريق الذي يقف وراء إطار عمل جافا سكريبت Svelte تم تبسيط عدد التبعيات من 61 إلى 16. هذا التخفيض له مزايا متعددة ، بما في ذلك تجربة REPL أسرع ، وتحسين التفاعل مواقع الويب ، وتنفيذ أسرع بشكل ملحوظ لتثبيت npm ، بغض النظر عن مدير الحزم لديك يفضل.

بالإضافة إلى تحسين حجم الحزمة ، قامت Svelte أيضًا بضبط الشفرة التي تنشئها للترطيب. على سبيل المثال ، أصبح رمز موقع SvelteKit الآن 110.2 كيلو بايت من 126.3 كيلو بايت ، وهو انخفاض بنسبة 13٪.

تجربة المطور المحسنة

يقوم Svelte الآن بتعيين الانتقالات على المستوى المحلي افتراضيًا ، مما يضمن أنها ليست عامة بشكل افتراضي. هذا يقلل من مخاطر التداخل مع الانتقالات الأخرى ويمنع الاصطدامات أثناء تحميل الصفحة ، مما يوفر تجربة مستخدم أكثر سلاسة.

instagram viewer

مكونات الويب

أصبح إنشاء Web Components في Svelte الآن أمرًا سهلاً باستخدام الإصدار الجديد بطاقة شعار:

"المكون الخاص بي" />

بينما ثبت أن هذا الأسلوب سهل الاستخدام في حالات بسيطة ، فقد فرض قيودًا على المزيد من التقدم سيناريوهات مثل التحكم في ما إذا كان يجب أن تنعكس قيم الخاصية المحدثة في DOM أو تعطيل الظل DOM.

أحدث Svelte 4 ثورة في تجربة تأليف Web Components من خلال تقديم سمة customElement في سفلت: خيارات. تتيح لك هذه السمة تكوين Web Components بخيارات متنوعة:

 العنصر المخصص = {{
 بطاقة شعار: "عنصر مخصص",
 ظل: 'لا أحد',
 الدعائم: {
 اسم: {
 يعكس القيمة المحدثة مرة أخرى إلى DOM 
 يعكس: حقيقي,
 يعكس القيمة  كـ  span> رقم 
 يكتب: 'رقم',


 اسم  من  span> السمة 
 يصف: "عنصر الفهرس"
 }
 }
 }}
/>