اجزای Alpine با تقسیم کد و بارگذاری تنبل با استفاده از Async Alpine

اجزای Alpine با تقسیم کد و بارگذاری تنبل با استفاده از Async Alpine

با AlpineJs، می‌توانید مؤلفه‌ها را به دو روش ایجاد کنید: با استفاده از نشانه‌گذاری HTML درون خطی یا با Alpine.data() برای تعریف یک جزء به صورت جهانی و استفاده از آن در کل پروژه.

هر رویکردی مزایا و معایب خود را دارد. به عنوان مثال، امکان کش کردن اجزای درون خطی وجود ندارد. و تنها در صورتی قابل استفاده مجدد هستند که از موتور قالب خود برای ایجاد اجزای قابل استفاده مجدد استفاده کنید. مزیت این رویکرد این است که شما نیازی به مرحله ساخت ندارید. می توانید AlpineJS را با استفاده از CDN به نشانه گذاری HTML خود اضافه کنید و شروع به ساخت برنامه خود کنید.

از سوی دیگر با استفاده از Alpine.data() برای اعلام کامپوننت‌ها، می‌توانید از آن‌ها دوباره استفاده کنید و مانند سایر فایل‌های استاتیک آن‌ها را در حافظه پنهان ذخیره کنید. این گزینه دارای معایبی نیز می باشد.
برای بسته‌بندی کدها باید یک باندلر مانند Vite یا Webpack راه‌اندازی کنید. و اگر پروژه بزرگی دارید، اندازه فایل همراه شما می تواند در طول زمان افزایش یابد.

برای رفع این مشکلات، می‌توانید از Async Alpine استفاده کنید تا اجزای خود را به فایل‌های جداگانه تقسیم کنید و فقط در صورت نیاز آنها را بارگیری کنید.

نصب و راه اندازی

می توانید از Async Alpine با استفاده از CDN یا npm استفاده کنید:

<script defer src="https://cdn.jsdelivr.net/npm/async-alpine@1.x.x/dist/async-alpine.script.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

وقتی می‌خواهید از CDN استفاده کنید، باید Async Alpine را قبل از بارگیری خود Alpine بارگیری کنید.

نصب از npm با:

npm install async-alpine

آن را به همراه Alpine در بسته خود وارد کنید و AsyncAlpine.init(Alpine) و AsyncAlpine.start() را قبل از Alpine.start() اجرا کنید:

import AsyncAlpine from 'async-alpine';
import Alpine from 'alpinejs';
AsyncAlpine.init(Alpine);
AsyncAlpine.start();
Alpine.start();

استفاده

برای استفاده از Async Alpine، باید اجزای خود را در فایل های جداگانه با استفاده از فرمت ES Module مانند کد زیر ایجاد کنید:

// publicly available at `/assets/path-to-component.js`
export default function myComponent() {
  return {
    message: '',
    init() {
      this.message = 'my component has initialised!'
    }
  }
}

پس از ایجاد کامپوننت ها در فایل های جداگانه، می توانید با استفاده از یکی از این چهار گزینه بسته به محیط خود، آنها را بارگذاری کنید:
اجزای URL – ساده ترین پیاده سازی که URL های مؤلفه را در JS اعلام می کند.
اجزای داده – برای ساخت ابزارهایی با وارد کردن/تقسیم کد پویا مانند Vite، WebPack، Rollup و Parcel.
بارگذاری مستعار – اگر اجزای شما در یک ساختار سیستم فایل بسیار سازگار هستند.
اجزای درون خطی – برای دریافت URL دارایی، به عنوان مثال، با استفاده از CDN دارایی یا برای سایت های Shopify، باید مؤلفه ها را در HTML اعلام کنید.

پس از بارگذاری کامپوننت ها، می توانید با افزودن از آنها به صورت ناهمزمان استفاده کنید x-ignore و ax-load باشما x-data ویژگی مانند کد زیر:

<div
  x-ignore
  ax-load="visible"
  x-data="myComponent"
>
  <div x-text="message"></div>
</div>

استراتژی های بارگذاری

در کد بالا می بینید که از مقداری در the استفاده کرده ایم ax-load صفت. شما می توانید استراتژی بارگذاری را با تنظیم این مقادیر در قسمت تغییر دهید ax-load

مشتاق

این رفتار پیش فرض است. اگر مقداری ارائه نکنید، کامپوننت در این حالت بارگیری می شود.
در حالت مشتاق، مؤلفه بلافاصله در بارگذاری صفحه شروع به بارگیری می کند.
همچنان به صورت ناهمزمان در پس‌زمینه بارگیری می‌شود اما با بالاترین اولویت ممکن.

این حالت زمانی مفید است که بخواهید یک مؤلفه در اسرع وقت تعاملی شود.

بیکار

از requestIdleCallback استفاده می‌کند، جایی که برای بارگیری زمانی که رشته اصلی کمتر مشغول است، پشتیبانی می‌شود.
اجزایی که برای بار اولیه حیاتی نیستند برای این سناریو بهترین هستند.

قابل رویت

از IntersectionObserver فقط برای بارگیری زمانی که کامپوننت در معرض دید است استفاده می کند، مشابه تصاویر با بارگذاری تنبل.

رسانه ها

هنگامی که درخواست رسانه ارائه شده درست باشد، مؤلفه بارگیری می شود.

رویداد

کامپوننت پس از دریافت رویداد async-alpine:load در پنجره بارگیری می شود. شناسه کامپوننت را به صورت detail.id ارائه کنید.

<!-- on a button click using Alpine's $dispatch -->
<button x-data @click="$dispatch('async-alpine:load', { id: 'my-component-1' })">Load component</button>
<div
  id="my-component-1"
  x-ignore
  ax-load="event"
  x-data="componentName"
></div>

<!-- load our component after `another-library-init` has loaded -->
<script>
window.addEventListener('another-library-init', () => {
  window.dispatchEvent(new CustomEvent('async-alpine:load', {
    detail: {
      id: 'my-component-2'
    }
  }))
})
</script>
<div
  id="my-component-2"
  x-ignore
  ax-load="media (prefers-reduced-motion: no-preference)"
  x-data="componentName"
></div>

برای اطلاعات بیشتر و نمونه های دقیق تر، می توانید سند رسمی Async Alpine را اینجا ببینید.