‏Size Limit: جلوی چاق شدن باندل رو می‌گیره

Size Limit یه ابزار خط فرمانه که برات یه سقف برای حجم جاوااسکریپت پروژه می‌ذاره (همون performance budget، یعنی حدی که قرار نیست ازش بگذری). روی هر کامیت تو CI اجرا می‌شه، هزینهٔ واقعی کد رو برای کاربر نهایی حساب می‌کنه و اگه از سقف رد شد خطا می‌ده و تست رو می‌شکنه. ساخت Evil Martians هست و پروژه‌هایی مثل MobX، Material-UI، Ant Design و PostCSS ازش استفاده می‌کنن.

نکتهٔ اصلیش اینه که فقط بایت نمی‌شمره. پلاگین time با کروم headless اندازه می‌گیره مرورگر چقدر وقت می‌بره تا کدت رو کامپایل و اجرا کنه، و اول قدرت پردازندهٔ سیستم خودت رو با یه گوشی اندروید ارزون مقایسه می‌کنه تا نرخ throttle رو دربیاره. تو README پروژه اومده که ۱۰۰ کیلوبایت جاوااسکریپت خیلی بیشتر از ۱۰۰ کیلوبایت عکس برای مرورگر هزینه داره، چون کامپایلرهای JS پیچیده‌ان. برای همین زمان معیار دقیق‌تری از حجمه.

تنظیماتش می‌تونه تو بخش size-limit فایل package.json باشه یا تو یه فایل جدا مثل .size-limit.json و حتی .size-limit.ts. هر بخش یه path می‌گیره و یه limit که می‌تونه حجم باشه یا زمان:

"size-limit": [
  {
    "limit": "1 s",
    "path": "dist/app-*.js"
  }
]

با گزینهٔ --why می‌فهمی چرا کتابخونه‌ات این‌قدر بزرگ شده و هزینهٔ هر dependency رو جدا می‌بینی؛ برای این تحلیل از Statoscope استفاده می‌کنه. یه گیت‌هاب اکشن جدا هم داره که تغییر حجم باندل رو زیر هر پول‌ریکوئست کامنت می‌کنه و می‌تونه اون PR رو رد کنه. پریست‌هاش هم آماده‌ان: preset-app برای اپلیکیشن، preset-big-lib برای کتابخونه‌های بالای ۱۰ کیلوبایت و preset-small-lib برای کوچیک‌ترها.

نکات کلیدی:

• سقف رو هم با حجم می‌شه گذاشت (مثل 35 kB) هم با زمان (مثل 1 s)
• پلاگین file حجم رو با Brotli (پیش‌فرض)، Gzip یا بدون فشرده‌سازی می‌سنجه
• preset-small-lib از rolldown و preset-big-lib از webpack استفاده می‌کنه
• برای فایل‌های CSS باید webpack: false بذاری، وگرنه حدود ۲ کیلوبایت runtime استایل‌لودر به عدد اضافه می‌شه
• PostCSS و Browserslist ۲۵ درصد، nanoid ۳۳ درصد و Logux ۹۰ درصد از حجمشون رو با همین ابزار کم کردن
• با --ignore-missing چک‌هایی که فایلشون ساخته نشده رد می‌شن جای این‌که خطا بدن