بايزلاين (Baseline): السر لشحن جافاسكريبت أقل بكثير

بايزلاين (Baseline): السر لشحن جافاسكريبت أقل بكثير

تذكر أيام jQuery الجميلة؟ كنت ترمي ملف 90 كيلوبايت في مشروعك وفجأة `$(document.ready())` يجعل كل شيء يعمل بسلاسة زبدية. ثم صرنا "أذكى"، قسمنا الباندلز، وبدلنا jQuery بـ React و Vue وخزانة كاملة من الميكرو-مكتبات لكل صغيرة وكبيرة.

لكن إليك الشيء الذي لا أزال ألاحظ نفسي أقوم به: ألجأ لمكتبة تنسيق تواريخ بحجم 20 كيلوبايت بينما المتصفح الذي أستهدفه يوفر أصلاً API يقوم بنفس المهمة. مجاناً. بلا طلب شبكة. بلا تحديث إصدارات. بلا صيانة مستقبلية.

هنا يأتي دور **بايزلاين (Baseline)**.

إذا لم تسمع به بعد، فـ Baseline مبادرة مدعومة من W3C تعطينا وسم بسيط وعالمي لـ "متى يمكنني استخدام هذه الميزة بأمان؟" تجيب على أكثر سؤال مزعج في تطوير الويب بكلمة واحدة: **اليوم**. وبمساعدتك على معرفة ما يستطيع منصة الويب التعامل معه بالفعل، يمكن لـ Baseline أن تقلص الجافاسكريبت الذي تشحنه بشكل دراماتيكي. لنغص في كيف.

ما هو Baseline حقاً؟

Baseline هو تفاهم مشترك حول دعم المتصفحات عبر كل اللاعبين الكبار: Chrome و Edge و Firefox و Safari و Opera. بدلاً من فحص مصفوفة "يعمل في 97% من المتصفحات"، يخبرك Baseline إذا كانت الميزة **متاحة** (تعمل في المتصفحات الحالية) أو **مُتاحة حديثاً** (وصلت للتو في أحدث الإصدارات). الفكرة هي إزالة التخمين.

فكر فيه كـ "caniuse، لكن بحكم أسهل". عندما تصبح ميزة Baseline، يعني ذلك أن كل متصفح في النظام البيئي الشائع يدعمها. تلك هي ضوءك الأخضر.

والأفضل؟ Baseline مدمج في أماكن تستخدمها على الأرجح بالفعل. زر جداول التوافق في MDN، ابحث عن ميزة، وستجد شارة Baseline بجانبها مباشرة. أو تفقد [web.dev/baseline](https://web.dev/baseline) للوحة تحكم بما هو جاهز اليوم.

لماذا هذا مهم لحجم الباندل الخاص بك

الفجوة بين "تحتاج مكتبة لهذا" و"المتصفح يفعل هذا" تستمر في الانكماش. كل عام، المتصفحات تضيف APIs كانت تتطلب полиفيلات، مكتبات مساعدة، ودوال مساعدة. إذا كنت لا تزال تشحن `moment-timezone` لحسابات المناطق الزمنية أو `lodash` لـ `_.debounce()`، فأنت تدفع مقابل شيء توفره المنصة بالفعل - سواء في البايتات أو في التعقيد.

دعني أريك ثلاثة أمثلة عملية حيث يمكن لـ Baseline مساعدتك في التخلص من الوزن الميت.

سيناريو 1: تنسيق التواريخ بدون تبعية 50 كيلوبايت

عملت مرة على مشروع استورد `date-fns` فقط لتنسيق بضع تواريخ في داشبورد. التطبيق كله كان داشبورد ثابت. كنا نشحن 16 كيلوبايت من دوال التواريخ المترجمة فقط لعرض نصوص مثل "Aug 9, 2026".

لكن إليك تجربة صغيرة: افتح كونسول متصفحك الآن واكتب:

```js
new Intl.DateTimeFormat('en-US', { dateStyle: 'full' }).format(new Date())
```

هذا كل شيء. **لا استيراد، لا npm install، لا تثبيت إصدار.** كائن `Intl` كان ميزة Baseline لسنوات. يتعامل مع التنسيق الخاص باللغات، المناطق الزمنية، حتى الوقت النسبي بأسلوب date-fns مع `Intl.RelativeTimeFormat`.

تريد التخلص من الباندل بالكامل؟ اربط دوال date-fns بمكافئاتها الأصلية:

- `format` → `Intl.DateTimeFormat`
- `formatDistance` → `Intl.RelativeTimeFormat`
- `parseISO` → `Date.parse()` (أو `new Date()` بحذر)
- `zonedTimeToUtc` → `Intl` مع خيار `timeZone`

نعم، توجد حالات حافة، لكن لـ 90% من المشاريع، API الأصلي لـ Intl يؤدي المهمة. وهو متاح في Baseline، لذا كل متصفح حديث يتعامل معه.

سيناريو 2: استبدال Lodash بـ DOM

لا أزال أرى `lodash.debounce` في بعض الكودبيزات. خمسة كيلوبايت لإجبار دالة على الانتظار قليلاً قبل التشغيل. لكن المتصفح لديه هذا مدمج:

```js
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
```

أو إذا كنت كسول مثلي، `setTimeout` بسيط في مستمع حدث يعمل بشكل جيد لمعظم الحالات. نفس الشيء لـ `_.throttle`، `_.clamp`، `_.range` - كلها مجرد أسطر قليلة من جافاسكريبت فانيلا.

لكن الأمر أعمق. تستخدم `_.forEach`؟ بروتوتيب Array يملك `forEach`، `map`، `filter`، `reduce` - كلها Baseline. `_.get` للوصول الآمن للخصائص المتداخلة؟ الـ Optional chaining ميزة Baseline منذ 2020. `_.unique`؟ هذا مجرد `Set`.

الـ DOM نفسه كنز: `classList.toggle()` يستبدل `_.toggleClass`، `Element.matches()` يستبدل محددات `_.is()`، و `IntersectionObserver` الأصلي يستبدل مكتبات scroll-spy كاملة. المرة القادمة التي ستضيف فيها تبعية، اسأل نفسك: "هل هذا مجرد غلاف فاخر لشيء `document.querySelectorAll` يعطيني إياه بالفعل؟"

سيناريو 3: طلبات HTTP بدون axios

Axios مكتبة جميلة، لكن في 2026، API الـ `fetch` الأصلي هو Baseline ويتعامل مع تقريباً كل حالة استخدام. ستري밍؟ `fetch` يدعم `response.body.getReader()` للستريمنغ. مصادقة؟ يمكنك تعيين headers، credentials، و interceptors بغلاف صغير. إلغاء؟ هذا `AbortController`، أيضاً Baseline.

لمشروع صغير، استبدلت axios بالكامل بمساعد بـ 20 سطر:

```js
async function request(url, options = {}) {
const res = await fetch(url, {
headers: { 'Content-Type': 'application/json', ...options.headers },
signal: options.signal ?? (options.timeout && AbortSignal.timeout(options.timeout)),
...options,
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}
```

لا npm، لا تضخم node_modules، لا تحذيرات تبعيات دائرية. فقط سريع، أصلي، وموثوق.

كيف تفحص تبعياتك فعلياً باستخدام Baseline

اقتنعت، فما التالي؟ إليك عملية عملية يمكنك القيام بها هذا العصر.

1. اذكر تبعيات وقت التشغيل

شغّل `npm ls --production` أو فقط انظر لـ `package.json`. أبرز أي شيء ليس إطار عملك أو مكتبة إدارة الحالة. تلك الحزم الصغيرة المساعدة هي الأهداف الرئيسية.

2. تحقق من كل واحدة مقابل Baseline

لكل مكتبة في قائمتك، اسأل سؤالين:

- ما المشكلة التي تحلها؟
- هل يمكنني حلها بـ Web API متاح في Baseline؟

ابحث في MDN عن الميزة. إذا رأيت الشارة الخضراء "Baseline available"، فأنت جاهز. إذا رأيت "Newly available" وأنت تستهدف متصفحات حديثة فقط، فلا يزال يستحق النظر. إذا كانت حمراء "Limited"، ربما احتفظ بالمكتبة للآن.

نصيحة سريعة: افتح أدوات المطور في Chrome أو Safari أو Firefox واختبر الـ API مباشرة. إذا عملت بدون فلاغ، فهذه علامة رائعة.

3. ابحث في كودك عن علامات مميزة

ابحث عن أنماط مثل `import * as _ from 'lodash'`، `from 'date-fns'`، `from 'axios'`، أو `from 'jquery'`. ثم انظر كم مرة تُستخدم تلك الدوال فعلياً. أحياناً تكتشف أنك تستخدم ثلاث دوال فقط من مكتبة بـ 200 دالة. هذه فرصة واضحة.

4. استبدل وقارن

قم بالهجرة مكتبة بمكتبة. احتفظ بـ PR منفصل لتتمكن من قياس تغيير حجم الباندل. استخدم تقرير حجم أداة البناء أو فقط تحقق من حجم الملف في devtools. أوصي بتشغيل Lighthouse قبل وبعد. رؤية "JavaScript execution time" تنخفض شعور جميل.

الجانب البشري لشحن جافاسكريبت أقل

لماذا نهتم، غير الرضا المغرور عن باندل أصغر؟ لأن الجافاسكريبت هو المورد الأغلى الذي نرسله للمتصفحات. كل بايت يجب تحميله، تحليله، ترجمته، وتنفيذه. كل API مُوفر يعني تحميل صفحة أسرع لشخص على أندرويد رخيص باتصال 3G متقطع. ليس الجميع يملك MacBook Pro موصول بالألياف البصرية.

شحن جافاسكريبت أقل يعني أيضاً عبء دماغي أقل لك، المطور. كل تبعية هي ثغرة أمنية محتملة، صداع ترحيل محتمل، ومصدر أخطاء غريب عندما يقرر مُافظها الاعتناء. الـ APIs الأصلية يُحافظ عليها بائعو المتصفحات، مما يعني أنها ستُحدث، تُوثق، وتُدعم لسنوات قادمة.

وهناك فائدة أعمق: تبدأ في فهم منصة الويب نفسها. عندما تستخدم `Intl`، `URL`، `Promise`، `Map`، `Optional Chaining`، و `fetch` مباشرة، تصبح مطور ويب أفضل. لست مجرد مستهلك للتجريدات؛ أنت بنّاء يعرف عروق الخشب.

هل توجد تحفظات؟ نعم. لا تكن سخيفاً.

Baseline ليس عصا سحرية. بعض الـ APIs المتقدمة لا تزال جديدة جداً لتكون Baseline في كل مكان. مثلاً، Popover API أو View Transitions API "متاحة حديثاً" لكن لم تهبط بالكامل في كل المتصفحات. إذا كنت تبني موقع عام لجمهور واسع، قد تريد الانتظار أو توفير fallback لطيف.

أيضاً، إسقاط مكتبة لا يعني دائماً كود أقل. أحياناً يجب أن تكتب جافاسكريبت فانيلا أكثر لتحقيق نفس السلوك. لكن هيا، بضعة أسطر إضافية من كودك الخاص أسهل في الصيانة من مكتبة مساعدة ضخمة لا تفهمها بالكامل.

وأخيراً، لا تصبح "متطرف APIs أصلية". إذا كانت مكتبة تغير إنتاجيتك تماماً وتجعل حياتك أسهل، استخدمها. هدف Baseline ليس أن يشمّئك لاستخدام مكتبات فاخرة. هو مساعدتك على اتخاذ مقايضات مدروسة. فقط لا تشحن `safe-password-generator` بينما `crypto.getRandomValues()` كان Baseline منذ 2015.

مكافأة: كيف تبقى محدثاً مع Baseline

منصة الويب تتطور بسرعة. للبقاء على اطلاع بما يصبح متاحاً في Baseline، أفعل أمرين:

1. تفقد لوحة **Web Platform Features** في [web.dev/baseline](https://web.dev/baseline) كل شهر تقريباً.
2. اقرأ قسم **أخبار Baseline في MDN**، الذي يسرد الميزات المتاحة حديثاً كل شهر.

يمكنك أيضاً متابعة مستودع GitHub لمجموعة مجتمع WebDX على [github.com/web-platform-dx/baseline](https://github.com/web-platform-dx/baseline). هناك يحدث السحر.

أسئلة متكررة

ما معنى "Baseline available" بالضبط؟

يعني أن الميزة مدعومة في إصدارات متصفحات رئيسية حالية وحديثة - Chrome، Edge، Firefox، Safari، و Opera. يمكنك استخدامها بدون بوليوفيل أو fallback لتلك المتصفحات.

هل Baseline نفس "caniuse.com"؟

لا، لكنهما مرتبطين. Caniuse يعطيك جداول توافق مفصلة، بما في ذلك الإصدارات القديمة. Baseline يخلص تلك البيانات في وسم بسيط "جاهز أو غير جاهز". كما يضمن أن المعلومة واعية للسياق - لمجرد أن شيء يعمل في Chrome 120 لا يعني أنه يعمل في Safari 12.

ماذا لو احتجت لا تزال لدعم متصفح قديم مثل IE11؟

IE11 مات، وحتى قبل ذلك كان استثناء. Baseline يستبعد صراحة المتصفحات القديمة مثل IE11. إذا كان يجب عليك دعم مثل هذه البيئات القديمة، ستحتاج لفحص جداول فردية وربما تضمين بوليوفيلات للـ APIs التي تختارها. لكن في 2026، من الآمن أن تسأل لماذا لا تزال تدعم IE11 - مستخدموك هم من يقررون التمسك بتقنية قديمة، وأنت من يدفع الثمن.

كيف يمكنني إقناع فريقي بالبدء في استخدام Baseline؟

أرهم الأرقام. اختر تبعية واحدة، قدر حجم الباندل وتكلفة الصيانة، ثم أظهر الاستبدال الأصلي في نموذج أولي سريع. فعلت هذا مع `lodash` في وظيفة سابقة، وبمجرد أن رأى رئيسي الـ diff - أداة 5 كيلوبايت مستبدلة بسطرين من JS فانيلا - اقتنع. وأرشدهم لهذا المقال. 😉

الخلاصة

Baseline ليس مجرد أداة توافق أخرى - إنه تحول في العقلية. بدلاً من سؤال "أي مكتبة يجب أن أستخدم لهذا؟" تبدأ بسؤال "ما الذي يستطيع المتصفح فعله لي بالفعل؟" اللحظة التي تقوم فيها بهذا التحول، تبدأ تضخمات الجافاسكريبت في الذوبان.

مستخدموك يحصلون على موقع أسرع. ذاتك المستقبلية تحصل على كودبيز أنظف. والويب يصبح أخف قليلاً للجميع.

الآن افتح devtools، انظر لباندل مشروعك، وانظر ما يمكنك قطعه. متصفحك على الأرجح ينتظر بالفعل بالإجابة.