‏کتابخونه‌هایی که مرورگر جاشون رو گرفته

جاد جوبران تو Smashing Magazine یه راهنمای عملی برای ممیزی وابستگی‌های پروژه نوشته: بیشتر ما یه بار پکیجی رو نصب می‌کنیم و دیگه هیچ‌وقت بهش برنمی‌گردیم، ولی پلتفرم وب داره تند جلو می‌ره. به گفتهٔ نویسنده تو یه اپ متوسط جاوااسکریپتی معمولاً بین ۶۰ تا ۹۰ کیلوبایت (minified و gzip) وابستگی هست که مرورگر الان خودش از پسش برمیاد.

معیار سنجش، Baseline ـه؛ پروژه‌ای از گروه WebDX که وضعیت هر قابلیت وب رو تو کروم، اج، فایرفاکس و سافاری با سه حالت نشون می‌ده: limited availability یعنی هنوز همه‌جا نیومده، Baseline Newly available یعنی تازه تو همهٔ موتورها لند شده، و Baseline Widely available یعنی ۳۰ ماهه که همه‌جا هست و بی‌دغدغه می‌شه سراغش رفت. وضعیت هر قابلیت رو تو webstatus.dev یا از بج بالای صفحهٔ MDN می‌بینی.

نویسنده قبل از حذف هر کتابخونه سه تا سؤال جلوت می‌ذاره: جایگزین بومی برای مخاطبِ خودِ تو امنه یا نه (نه به‌شکل انتزاعی — سراغ آنالیتیکس و browserslist برو)؛ هزینهٔ تعویض چقدره، چون گاهی پلی‌فیل از خود کتابخونه سنگین‌تره؛ و قابلیت پلتفرم واقعاً همون کاری رو که ازش می‌خوای پوشش می‌ده یا نه.

پرسودترین خوشه، بین‌المللی‌سازیه: timeago.js، pluralize، numeral و humanize-duration روی هم حدود ۱۴ کیلوبایت‌ان و تقریباً همه‌شون با خانوادهٔ Intl جایگزین می‌شن.

const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

rtf.format(-1, "day"); // "yesterday"
rtf.format(3, "hour"); // "in 3 hours"
rtf.format(-2, "week"); // "2 weeks ago"

تنها استثنای این خوشه Intl.DurationFormat ـه که هنوز Newly available حساب می‌شه، پس برای مخاطب عمومی بهتره فعلاً فالبک نگه داری. سراغ HTTP هم که بری، axios حدود ۱۷ کیلوبایته و برای درخواست‌های ساده fetch به‌همراه AbortController کافیه؛ ولی نویسنده تأکید می‌کنه این یکی جای جایگزینی کورکورانه نیست، چون fetch روی خطاهای HTTP مثل ۴۰۴ و ۵۰۰ اصلاً reject نمی‌کنه و باید خودت res.ok رو چک کنی، interceptor و ریترای خودکار هم نداره و پیشرفت آپلود رو گزارش نمی‌ده.

تو خوشهٔ رابط کاربری، المان dialog به‌تنهایی جای کتابخونهٔ مودال و focus-trap رو می‌گیره و Popover API با anchor positioning کار tippy.js رو انجام می‌ده — روی هم حدود ۲۴ کیلوبایت. از Lodash هم structuredClone و Object.groupBy جایگزین clonedeep و groupby شدن، ولی debounce و throttle هنوز معادل بومی ندارن. در مقابل نویسنده می‌گه Temporal رو هنوز جایگزین نکن: چون سافاری نسخهٔ پایدارش رو نداده، پلی‌فیل ۴۴ کیلوبایتی باندل رو بزرگ‌تر می‌کنه، نه کوچیک‌تر.

نکات کلیدی:

• Baseline سه حالته: limited، newly available و widely available (۳۰ ماه حضور تو همهٔ موتورها).
• قبل از حذف هر کتابخونه: مخاطب، هزینهٔ تعویض، و پوشش واقعی کاربرد رو بسنج.
• خوشهٔ Intl حدود ۱۴، axios حدود ۱۷ و المان‌های رابط کاربری حدود ۲۴ کیلوبایت صرفه‌جویی دارن.
• structuredClone و Object.groupBy جای lodash رو می‌گیرن، ولی debounce و throttle نه.
• Temporal هنوز Baseline نیست و پلی‌فیلش ۴۴ کیلوبایته، پس فعلاً dayjs سر جاش بمونه.