React Native Performance Optimization Case Study
تجربتي في بناء "Super App": كيف وقعت في فخ حجم التطبيق وكيف خرجت منه
ياسر نجيب •
البداية البريئة
بدأنا مشروع “تطبيق خدمات شامل” (توصيل، دفع، تواصل). كلما طلب العميل ميزة، كنا نقول: “هناك مكتبة لذلك!”.
- مكتبة للتقويم؟
- npm install
- مكتبة للرسوم البيانية؟
- npm install
- مكتبة للتعامل مع الوقت؟
- moment.js (كارثة).
بعد 6 أشهر، حجم التطبيق على متجر أبل تجاوز 150 ميجابايت. معدل التنزيل انخفض بحدة لأن المستخدمين يرفضون تحميله على الـ Data.
عملية الإنقاذ (The Cleanup)
قررت التوقف عن التطوير والبدء في “التنظيف”.
1. وداعاً Moment.js، أهلاً Day.js
استبدال
- moment بـ
- dayjs وفر لنا وحدها حوالي 300kb من كود الـ JS المضغوط.
2. التخلص من التبعيات غير المستخدمة
استخدمت أداة
- depcheck. فوجئت بأننا نستخدم مكتبة UI كاملة من أجل “زر” واحد فقط! قمت بإعادة كتابة الزر يدوياً وحذفت المكتبة العملاقة.
3. تفعيل Hermes Bytecode
تفعيل Hermes لا يسرع التطبيق فحسب، بل يضغط كود الـ JavaScript بشكل هائل (Bytecode). انخفض الحجم بنسبة 40% فوراً.
الدرس المستفاد
كل
- npm install هو دين تقني. قبل أن تضيف مكتبة، اسأل نفسك: “هل يمكنني كتابة هذا في ساعة؟”. إذا كانت الإجابة نعم، اكتبه بنفسك.