جدیدترین ها را در Svelte 4 کشف کنید: عملکرد پیشرفته و توسعه کارآمد

جدیدترین نسخه چارچوب Svelte عملکرد را با چندین ویژگی جدید بهبود می بخشد.

با انتشار آخرین نسخه خود، Svelte 4، چارچوب تحسین شده جاوا اسکریپت برای توسعه برنامه های کاربردی وب گام بزرگی به جلو برداشته است. این به‌روزرسانی مجموعه‌ای از پیشرفت‌های هیجان‌انگیز را با تمرکز اصلی بر بهینه‌سازی عملکرد و افزایش تجربه توسعه‌دهنده به ارمغان می‌آورد.

کوچکتر و مستقل تر

یکی از قابل توجه ترین پیشرفت ها کاهش قابل توجه در اندازه کلی است. از 10.6 مگابایت سنگین، حجم Svelte اکنون به 2.8 مگابایت بسیار باریکتر شده است که کاهش چشمگیر 75 درصدی در اندازه دارد.

علاوه بر این، تیم پشت چارچوب جاوا اسکریپت Svelte تعداد وابستگی ها را از 61 به 16 ساده کرده است. این کاهش مزایای متعددی دارد، از جمله تجربه REPL سریعتر، تعامل بیشتر در وب سایت ها، و اجرای سریعتر نصب npm بدون توجه به مدیر بسته. شما ترجیح میدهید.

فراتر از بهینه سازی اندازه بسته، Svelte همچنین کدی را که برای هیدراتاسیون تولید می کند، تنظیم کرده است. به عنوان مثال، کد وب سایت SvelteKit اکنون 110.2 کیلوبایت از 126.3 کیلوبایت است که کاهش 13 درصدی را نشان می دهد.

تجربه توسعه‌دهنده پیشرفته

Svelte اکنون انتقال‌ها را به صورت پیش‌فرض به محلی تنظیم می‌کند و اطمینان می‌دهد که به‌طور پیش‌فرض جهانی نیستند. این امر خطر تداخل با سایر انتقال‌ها را به حداقل می‌رساند و از برخورد در حین بارگذاری صفحه جلوگیری می‌کند و تجربه کاربری روان‌تری را ارائه می‌دهد.

اجزای وب

ایجاد اجزای وب در Svelte اکنون با استفاده از تگ جدید ساده است:

<svelte:options tag="my-component" />

در حالی که استفاده از این رویکرد در موارد ساده ثابت شده است، اما محدودیت‌هایی را برای سناریوهای پیشرفته‌تر ایجاد می‌کند، مانند کنترل اینکه آیا مقادیر به‌روزرسانی شده باید در DOM منعکس شود یا غیرفعال کردن DOM سایه.

Svelte 4 با معرفی ویژگی customElement اختصاصی در svelte:options، تجربه نگارش Web Components را متحول کرده است. این ویژگی به شما امکان می دهد تا Web Components را با گزینه های مختلف پیکربندی کنید:

<svelte:options
  customElement={{
    tag: 'custom-element',
    shadow: 'none',
    props: {
      name: {
        <!-- Reflects the updated value back to the DOM -->
        reflect: true,

        <!-- Reflects the value as a number -->
        type: 'Number',

        <!-- Name of the attribute -->
        attribute: 'element-index'
      }
    }
  }}
/>

<script>
  export let elementIndex;
</script>

انواع دقیق تر

اکنون createEventDispatcher پارامترهای ارائه شده را از نظر نوع و تعداد صحت بررسی می کند و خطاهای مربوطه را بر این اساس پرتاب می کند:

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{
  optional: number | null;
  required: string;
  noArgument: never;
}>();


// Svelte version 3
dispatch('optional');

// Detail argument still omitted
dispatch('required');

// Detail argument still provided
dispatch('noArgument', 'surprise');


// Svelte version 4 using TypeScript strict mode
dispatch('optional');

// Error, missing argument
dispatch('required');

// Error, cannot pass an argument
dispatch('noArgument', 'surprise');

Action و ActionReturn اکنون به طور پیش‌فرض به نوع پارامتر هرگز در صورتی که Action نوع عمومی ارائه نشده باشد، می‌دهد:

const untyped: Action = (node, params) => {
  // Now an error as `params` is expected not to exist
}

const typed: Action<HTMLElement, string> = (node, params) => {
  // `params` is of type string
}

onMount اکنون نیاز دارد که بازگشت آن یک تابع همگام باشد، زیرا یک تابع ناهمزمان ممکن است منجر به باگ شود اگر پاسخ تماس در هنگام نابودی اجرا شود. این مورد فقط برای توابع همزمان است:

// `cleanup()` will not be called
onMount(async () => {
  const bar = await foo();
  return cleanup();
});

// `cleanup()` will be called
onMount(() => {
  foo().then(bar => /* ... */ );
  return cleanup();
});

مهاجرت آسان شد

انتقال از Svelte 3 به Svelte 4 در صورت استفاده از ابزار مهاجرت به روز شده تیم آسان است. با دستور زیر می توانید ارتقا دهید:

npx svelte-migrate@latest svelte-4

توجه به حداقل نسخه به روز شده الزامی است:

• NodeJS 16 یا بالاتر
• SvelteKit 1.20.4 یا بالاتر
• TypeScript 5 یا بالاتر

از Svelte 5 چه انتظاری باید داشت

تا کنون، اطلاعات بسیار کمی در مورد ویژگی های آینده Svelte 5 در دسترس است. با این حال، از آنجایی که Svelte نزدیک به ESLint است، اندازه بسته آن نیز تحت تأثیر قرار می گیرد.

بازنویسی مداوم ESLint باید اندازه بسته را تا زمان انتشار Svelte 5 بیش از 50٪ کاهش دهد.

در آغوش گرفتن آینده Svelte

Svelte 4 زمینه را برای یک فرآیند توسعه روانتر و کارآمدتر فراهم می کند. این راه را برای احتمالات هیجان انگیزتر در نسخه آینده Svelte 5 هموار می کند.

با ادامه تکامل و انطباق چارچوب با نیازهای توسعه شما، آینده برای علاقه مندان Svelte و کسانی که به دنبال استفاده از قابلیت های آن برای ساخت برنامه های کاربردی وب نوآورانه هستند روشن به نظر می رسد.

همانطور که از قدرت چارچوب جاوا اسکریپت Svelte 4 استقبال می کنید، در موقعیت خوبی قرار می گیرید تا برنامه های کاربردی پیشرفته ای را ایجاد کنید که تجربه کاربری استثنایی را ارائه می دهند.

منبع مقاله