‏quicklink: صفحهٔ بعدی رو زودتر آماده کن

تو مخزن quicklink اومده که هدفش سادست: رفتن به صفحهٔ بعدی رو سریع‌تر کنه، بدون اینکه لازم باشه ساختار سایت رو عوض کنی. کتابخونه با IntersectionObserver لینک‌هایی که وارد دید کاربر شدن رو پیدا می‌کنه، با requestIdleCallback صبر می‌کنه تا مرورگر بیکار بشه، و بعد اون URLها رو از قبل می‌گیره. کل حجمش هم زیر ۲ کیلوبایت minify و gzip شده‌ست.

یه بخش مهمش اینه که بی‌ملاحظه دانلود نمی‌کنه. قبل از هر درخواست navigator.connection.effectiveType رو نگاه می‌کنه تا کاربری که روی اینترنت کنده رو معاف کنه، و اگه saveData (یعنی حالت ذخیرهٔ مصرف داده تو مرورگر) روشن باشه هم بی‌خیال می‌شه. درخواست‌ها به‌طور پیش‌فرض کم‌اولویتن و با link rel=prefetch یا XHR انجام می‌شن؛ با priority: true سراغ fetch() می‌ره.

جدا از prefetch، که یعنی فقط از قبل گرفتن فایل صفحه، یه حالت prerender هم داره که با Speculation Rules API کل صفحه رو از قبل رندر می‌کنه، پس کلیک تقریباً آنی باز می‌شه. با prerender: true روشن می‌شه و اگه مرورگر پشتیبانی نکنه خودش به prefetch برمی‌گرده. نکتهٔ جالبش اینه که وقتی لینک از دید خارج می‌شه اسکریپت speculationrules رو از DOM برمی‌داره، و همین باعث می‌شه بشه از سقف ۱۰تایی prerender رد شد.

کنترل ریزش هم کم نیست: delay می‌گه لینک چند میلی‌ثانیه باید تو دید بمونه، limit سقف کل درخواست‌ها، throttle سقف درخواست‌های هم‌زمان، threshold درصد دیده‌شدن لینک، و timeout که پیش‌فرضش ۲۰۰۰ میلی‌ثانیه‌ست. به‌طور پیش‌فرض فقط دامنهٔ خودت prefetch می‌شه و origins این لیست رو باز می‌کنه. با ignores هم هرچی نمی‌خوای رو کنار می‌ذاری:

quicklink.listen({
  ignores: [
    /\/api\/?/,
    uri => uri.includes('.zip'),
    (uri, elem) => elem.hasAttribute('noprefetch'),
  ],
});

نکات کلیدی:

• شناسایی لینک‌های داخل دید با IntersectionObserver و اجرا در زمان بیکاری با requestIdleCallback
• حجم زیر ۲ کیلوبایت (minify و gzip) و بدون نیاز به تغییر ساختار سایت
• رعایت اینترنت کند و saveData؛ درخواست‌ها به‌طور پیش‌فرض کم‌اولویت
• حالت prerender با Speculation Rules API و بازگشت خودکار به prefetch در مرورگرهای بدون پشتیبانی
• مقدار پیش‌فرض timeout برابر ۲۰۰۰ میلی‌ثانیه و prefetch فقط روی دامنهٔ خودی
• HOC ری‌اکت withQuicklink برای اپ‌های تک‌صفحه‌ای، همراه با webpack-route-manifest