التبعيات النظيرة وTree Shaking

تعلن الاعتماديات النظيرة عن الحزم التي تتطلبها مكتبتك، لكنها تتوقع من المستخدم توفيرها. في package.json الخاص بمكتبتك، يجب أن يكون React ضمن peerDependencies لا dependencies. وعندما يثبت المستخدم مكتبتك، لا يثبت npm أو yarn React تلقائيًا؛ فتطبيق المستخدم يحتوي على React أصلًا، وتتشارك مكتبتك المثيلة نفسها.

إذا كان React ضمن dependencies في مكتبتك، فقد يثبت npm نسخة ثانية من React إلى جانب نسخة المستخدم. يؤدي وجود مثيلين من React في التطبيق نفسه إلى تعطيل جميع Hooks وظهور الخطأ "Invalid hook call". وبإعلان React كـ peerDependency، تخبر npm: "أحتاج إلى React، لكن استخدم النسخة الموجودة لدى المستخدم أصلًا."

قد تكون بعض الاعتماديات النظيرة اختيارية، مثل مكتبة تدعم كلًا من styled-components وCSS Modules. حدّد الاعتماديات النظيرة الاختيارية باستخدام peerDependenciesMeta: { 'styled-components': { optional: true } }. لن يحذّر npm المستخدمين من الاعتماديات النظيرة الاختيارية المفقودة، لكن يظل بالإمكان توفير أنواع TypeScript عند تثبيت الحزمة الاختيارية.

يخبر حقل sideEffects في package.json أدوات التجميع ما إذا كانت مكتبتك آمنة لإجراء tree-shaking عليها. ويخبر ضبط "sideEffects": false webpack وRollup والأدوات المشابهة بأن استيراد أي وحدة من مكتبتك لا يسبب آثارًا جانبية، ولذلك يمكن حذف جميع الصادرات غير المستخدمة بأمان من حزمة المستخدم.

تُعد استيرادات CSS أثرًا جانبيًا شائعًا، إذ تحقن الأنماط في الصفحة نتيجة استيرادها. فإذا كانت مكتبتك تستورد ملفات CSS، اضبط "sideEffects": ["*.css", "*.scss"] لإخبار أدوات التجميع بأن ملفات JavaScript آمنة لإجراء tree-shaking عليها، لكن يجب تضمين ملفات CSS دائمًا عند استيرادها.

لتحقيق أقصى قابلية لـ tree-shaking، صدّر كل مكوّن كصادرات مسمّاة من ملفه الخاص. وفي index.ts، أعد تصدير كل شيء: export { Button } from './Button'. عندما يستورد المستخدم Button فقط، تستطيع أداة التجميع حذف جميع المكوّنات الأخرى. وتتيح ملفات التجميع التي تعيد التصدير تطبيق هذا النمط.

استخدم bundlejs.com لاختبار tree-shaking: ألصق جملة الاستيراد، وسيعرض الموقع حجم الحزمة الفعلي. وتتيح حزمة npm المسماة size-limit تحديد ميزانيات الحجم في package.json وإفشال CI إذا تجاوز حجم الاستيراد الحد: "size-limit": [{ "path": "dist/index.js", "limit": "10 KB" }].

حدّد ميزانية لحجم استيرادات مكتبتك. شغّل npx size-limit في CI لفرضها. ويشير نمو تأثير الحزمة بمرور الوقت إلى توسع غير منضبط في النطاق. ينبغي لمكتبة مكوّنات مركّزة أن تُبقي استيرادات المكوّنات الفردية ضمن بضعة كيلوبايتات. أطلق تنبيهًا عند حدوث تراجعات قبل وصولها إلى المستخدمين.

تجنب styled-components وEmotion في مكتبات المكوّنات التي تنوي توزيعها. تتطلب حلول CSS-in-JS وقت التشغيل هذه من المستخدم تثبيت المكتبة والإصدار نفسيهما، مما يسبب تعارضات في الاعتماديات النظيرة. وحتى إذا كان المستخدم يستعمل Tailwind أو CSS عاديًا، فعليه تضمين وقت تشغيل CSS-in-JS في الحزمة. فضّل CSS Modules، التي تُترجم إلى CSS عادي وقت البناء.

تعمل CSS Modules جيدًا في المكتبات عند دمجها مع أداة تجميع تعالجها. يستطيع tsup وRollup تضمين مخرجات CSS Modules بأسماء أصناف محددة النطاق. ولا يحتاج المستخدم إلى ضبط أي شيء؛ فالأنماط محددة النطاق ومضمّنة مسبقًا في حزمة JS أو في ملف CSS منفصل يجري استيراده.

توضع أدوات التطوير الخاصة بك (tsup وTypeScript ومكتبات الاختبار وStorybook) ضمن devDependencies، إذ لا تحتاج إليها إلا أثناء التطوير، وتُستبعد من npm install لدى المستخدمين. ويوضع React ضمن كل من peerDependencies (لأنه متطلب وقت التشغيل) وdevDependencies (للحاجة إليه عند ترجمة مكتبتك واختبارها محليًا).

ما الذي يبلغه ضبط "sideEffects": false في package.json الخاص بالمكتبة إلى أدوات التجميع؟

أعلن عن React ضمن peerDependencies (لا dependencies) لكي يتشارك المستخدمون مثيلة React الموجودة في تطبيقاتهم. يتيح sideEffects: false إجراء tree-shaking كامل لمكتبتك. استخدم sideEffects: ['*.css'] لحماية استيرادات CSS من الحذف. وتزيد الصادرات المسمّاة من الملفات الفردية دقة tree-shaking إلى أقصى حد. افرض ميزانية للحجم باستخدام size-limit في CI. وفضّل CSS Modules على CSS-in-JS في المكتبات لتجنب تعارضات الاعتماديات النظيرة.