أعمل في Mutual . تعمل في البرازيل في مجال المساواة في الائتمان. نحن نساعد المقترضين والمقرضين على التواصل مع بعضهم البعض. الأول يبحث عن رهانات جيدة ، بينما يبحث الأخير عن دخل يتجاوز ما يمكن للسوق أن يقدمه لهم. يتم استخدام منتجاتنا من قبل مجموعة واسعة من المستخدمين ، ونحن نعمل في بلد كبير. ونتيجة لذلك ، يتم تنزيل تطبيقات iOS و Android القائمة على React Native إلى أجهزة مختلفة جدًا.
وتجدر الإشارة إلى أن الجزء الأكبر من المستخدمين يقومون بتثبيت التطبيقات على أجهزة الميزانية. يمكننا استخلاص مثل هذه الاستنتاجات باستخدام البيانات من مكتبة Facebook على مدار العام .. هذه المكتبة ، بعد أن تلقت معلومات حول طراز الجهاز ، تقارير في أي عام يعتبر هذا الجهاز هاتفًا رائدًا راقيًا. على سبيل المثال ، الهاتف الأكثر شعبية بين مستخدمينا هو Samsung Galaxy A10. هذا الهاتف ، على الرغم من أنه تم إصداره في عام 2019 ، يمكن اعتباره الرائد فقط في عام 2013. تحليل البيانات على أجهزة المستخدم ، يمكننا القول أنه يمكن التعرف على 85 ٪ من هذه الأجهزة كأجهزة متطورة فقط في عام 2015 أو قبل ذلك. ولهذا السبب ، لدينا متطلبات خاصة لتحسين تطبيق الهاتف المحمول الخاص بنا. الهدف من التحسين هو أنه حتى المستخدمين الذين لديهم أجهزة ضعيفة يمكنهم استخدام تطبيقنا بشكل مريح.النسبة المئوية للأجهزة التي يمكن التعرف عليها كرائدة في عام معينفي هذا الصدد ، أولىنا اهتمامًا كبيرًا بحجم التطبيق. في حالة إصدار Android الخاص به ، كان 26.8 ميغابايت. على الرغم من أن هذا ليس حجمًا كبيرًا ، إلا أنه بالتأكيد أكبر من الحجم المتوسط لتطبيقات المستخدمين. هذا الرقم ، وفقًا لـ Google Play Console ، هو 16.3 ميغابايت. يمكن أن يكون حجم التطبيق عاملاً حاسماً للمستخدمين ذوي خطط التعريفات المحدودة ، أو لأولئك الذين لديهم أجهزة ذاكرة منخفضة ، مما يجبر المستخدمين على اختيار التطبيقات التي سيقومون بتثبيتها بعناية. نتيجة لذلك ، يجب إلغاء تثبيت بعض التطبيقات. هذا مهم بشكل خاص في حالة التطبيق المتبادل ، حيث يدفع المقترضون أقساط شهرية من خلال هذا التطبيق. عندما يقوم المقترض بإلغاء تثبيت طلبنا ، فإن فرص قيامه بالدفع في الوقت المحدد تقل بشكل كبير.وهذا يؤثر بشكل مباشر على أرباح المستثمرين باستخدام منصتنا.حجم التطبيق المتبادل أكبر بكثير من متوسط حجمتطبيقات المستخدمين لدينا . ولا يؤثر حجم التطبيق على مستوى عمليات التثبيت فقط. يؤثر الحجم أيضًا على معدل التحويل لإعدادات التطبيق. إليك مقالة جيدة حول هذا كتبها فريق Google Play. تتناول هذه المقالة أهمية حجم التطبيق. على وجه الخصوص ، تقول أن كل 6 ميغابايت إضافية من حجم ملف APK يقلل من معدل تحويل التثبيتات بنسبة 1 ٪.يتحدثون أيضًا عن حقيقة أن هذا التأثير أقوى في البلدان النامية حيث أجهزة الميزانية هي القاعدة. أي أن تقليل حجم ملف APK بمقدار 10 ميجابايت في الأسواق الناشئة يتوافق مع زيادة في معدل تحويل المنشآت بنسبة 2.5٪ تقريبًا.زيادة معدل التحويل لعمليات التثبيت لكل 10 ميجا بايت من تقليل حجم ملف APK في بلدان مختلفة (وفقًا لبيانات Google الداخلية)لقد تأثرنا كثيرًا بكيفية تأثير تقليل حجم التطبيق على مستوى عمليات إلغاء التثبيت ومعدل التحويل لإعدادات التطبيق. ونتيجة لذلك ، بدأنا العمل بهدف تقليل حجم التطبيق قدر الإمكان ، مع مراعاة ملاءمته للمستخدمين. كانت الخطوة الأولى في هذا المشروع هي تحليل توصيات Googleالرسميةلمطوري Android.حزمة تطبيقات Android
عند قراءة التوصيات ، تعلمنا أن أسهل طريقة لتقليل حجم التطبيق هي استخدام طريقة توزيع جديدة للتطبيق تسمى حزمة تطبيقات Android (AAB). حتى تلك اللحظة ، قمنا بتوزيع التطبيق ، وجمع ملف حزمة Android (APK) القديم الجيد ، والذي يمكن تشغيله على معظم أجهزة Android ، وتحميله على Google Play Console. لكن حزمة AAB تحتوي فقط على التعليمات البرمجية والموارد المترجمة. ونتيجة لذلك ، عندما يتم تنزيله ، تكون Google مسؤولة عن إنشاء ملفات APK محسنة لأنواع مختلفة من الأجهزة ، مع مراعاة مواصفاتها وبنية وحدة المعالجة المركزية.اتضح أنه من خلال إجراء تغيير بسيط على عملية بناء المشروع ، هل يمكننا الحصول على تخفيض خطير في حجم التطبيق دون بذل المزيد من الجهد؟ هذا جيد جدا للحقيقة!بعد أن قرأنا الوثائق ، قمنا فقط بتغيير نص بناء React Native Gradle بحيث يتم assembleReleaseتشغيله بدلاً من البرنامج الحالي bundleRelease. هذا كل ما نحتاجه لإنشاء ملف AAB. بعد إجراء المزيد من التعديلات على supplyتهيئة Fastlane فيما يتعلق بالتحميل التلقائي للمواد مباشرة إلى متجر Play ، انتقلنا إلى AAB ، وظهر إصدار جديد من تطبيقنا في Google Play Console.أدى هذا التغيير وحده إلى تقليل حجم ملفات APK التي تم نقلها إلى أجهزة المستخدم. تراوح الانخفاض بين 9.1 و 12.4 ميجا بايت. كما اتضح ، فإن استخدام Android App Bundle هو تقنية فعالة تسمح ، في الواقع ، بتقليل حجم التطبيق.ملف APK القديم وحزمة AAB الجديدة ، التي يؤدي استخدامها إلى حقيقة أن حجم التطبيق على الأجهزة المختلفة يمكن أن يكون من 14.4 إلى 17.7 ميغابايتصحيح ، يجب أن تكون حذرًا هنا. إذا كنت تستخدم React Native with Hermes ، فقد تحتاج إلى تحديث تبعيتكsoloader(انظر التفاصيل هنا ). خلاف ذلك ، هناك خطر من إعطاء المستخدم تطبيقًا يحتوي على خطأ فادح. كنا محظوظين ، وتمكنا من تحديد هذه المشكلة أثناء اختبار الإصدار الأولي للمشروع. لكن يمكن أن ينزلق الخطأ بسهولة إلى الإنتاج ، لأنه لا يظهر أثناء الاختبار المحلي أو عند إنشاء ملف APK.تحسين موارد التطبيق باستخدام Android Size Analyzer
كان الاقتراح التالي لتحسين التطبيقات التي وجدناها في الوثائق هو استخدام Android Size Analyzer . هذه أداة سطر أوامر تحلل تطبيقات Android وتبحث عن طرق لتقليل حجمها. أطلقنا هذه الأداة باستخدام أمر من النموذج التالي:size-analyzer check-bundle [BUNDLE].aab
ونتيجة لذلك ، حصلنا على قائمة بموارد التطبيق والصور الرائعة التي يمكننا تحسينها. وقد أوصينا أيضًا بإعداد ProGuard.تقرير محلل الحجم▍ProGuard
ProGuard هي أداة لضغط وتشويه وتحسين Java bytecode. لم نستكشف بعد إمكانية استخدام هذه الأداة ، حيث علمنا أنها قد لا تكون متوافقة مع بعض مكتبات Android. نظرًا لأننا سعينا لتقليل حجم تطبيقنا بأسرع وقت ممكن ، ولجعل هذا الأمر بسيطًا قدر الإمكان ، قررنا ترك طريقة التحسين هذه في المستقبل.appموارد التطبيق كبيرة
بتشغيله size-analyzerمرة أخرى ، باستخدام المفتاح -d، حصلنا على قائمة بموارد التطبيق ، مرتبة حسب حجمها. نظرًا لأن هذه الأداة لا تعرف أي شيء عن كيفية عمل المستخدمين مع التطبيق ، فقد أتاحت لنا الفرصة لتحديد الموارد التي يجب إزالتها بشكل مستقل وأيها يجب تحميله ديناميكيًا في التطبيق.قائمة بموارد التطبيق الكبيرة مرتبة حسب الحجمأول وأكبر مورد في هذه القائمة هو حزمة JavaScript الأصلية المتفاعلة. الآن لا يمكننا تقسيم هذه الحزمة وتحميلها ديناميكيًا. ولكن في وقت لاحق سوف نفكر في ذلك. يوجد أسفل القائمة ملفات الخطوط الكبيرة (TTF) وملفات الصور (JPG و PNG).imagesصور غير ضرورية
تم لفت انتباهنا على الفور إلى صور JPG الضخمة المستخدمة في Storybook . نستخدم هذا النظام لتطوير واختبار المكونات. هذا هو 2 ميغا بايت من القمامة التي تقع في نسخة الإنتاج من المشروع. خطأ مخزي! عندما يحدث شيء من هذا القبيل ، نشعر وكأننا قمنا ببعض الغباء الشديد. ولكن في عالم تطوير البرمجيات المعقد ، يرتكب الجميع الأخطاء. أعتقد أنه إذا تحدثت عن أخطائك علنًا ، فسوف يساعد المطورين الآخرين على التعلم من هذه الأخطاء. هناك احتمال أن ترتكب نفس الأخطاء إذا لم تقم بتحليل هيكل موارد التطبيق ، الذي يزداد حجمه تدريجيًا.onts الخطوط
بعد أن تخلصنا بسرعة من الصور غير الضرورية ، شرعنا في تحليل عناصر أخرى من قائمة الموارد. كان من الواضح أن هناك الكثير من الخطوط المضمنة فيه. بعد أن تحدثنا عن هذا مع مصممينا ، أخبرونا أن العديد من المكونات القديمة لا تختلف في الالتزام الصارم بكتيبات الطباعة. لذلك ، اكتشفنا المكونات التي يمكن إزالتها ، والتي يمكنك من خلالها استخدام الخطوط المحدثة المناسبة. بفضل هذا ، تمكنا من تقليل عدد الخطوط المستخدمة من ستة إلى أربعة.شيء آخر لاحظناه هو الحجم الهائل لملفات الخطوط نفسها. كان حجم كل منها حوالي 670 كيلوبايت. وهذا يعني أن أربعة خطوط في الحزمة غير المضغوطة تحتل 2.7 ميغابايت مذهلة. ولكن لحسن الحظ ، هناك أداة تسمى FontForge تسمح لك بتحليل ملفات الخطوط وتعديلها بعمق. باستخدام هذه الأداة ، تمكنا من معرفة أن السبب الرئيسي للحجم الكبير لملفات الخطوط هو الأحرف السيريلية الممتدة والرموز الرمزية غير الضرورية. يمكننا إزالة كل هذا بأمان ، لأن جزء النص من طلبنا مكتوب بالكامل باللغة البرتغالية. بفضل هذا التغيير ، تمكنا من تقليل حجم ملفات الخطوط من 670 كيلوبايت إلى 70 كيلوبايت - بنسبة 90٪.أمثلة على بعض الحروف الرسومية المضمنة في خطوطنا ،نظرًا لأننا تخلصنا من الخطوط غير الضرورية وقمنا بتحسين الخطوط المتبقية ، فقد تمكنا من تقليل حجم التطبيق بمقدار 3.8 ميجا بايت. أدى هذا إلى انخفاض لطيف في الحجم الإجمالي لملف APK بمقدار 2 ميغابايت.قائمة الخطوط وأحجامها قبل التحسينقائمة الخطوط وأحجامها بعد التحسينpt تحسين الصور
بعد تحليل الصور التي لا تزال موجودة في التطبيق ، لاحظنا أن بعضها كبير جدًا. لقد عالجنا العديد من هذه الصور باستخدام أداة تحسين الرسومات TinyPNG وشهدنا انخفاضًا كبيرًا في حجم هذه الصور. بعد ذلك ، قررنا تحسين جميع صور JPG و PNG المستخدمة في التطبيق. كان هناك 41 منهم.الصورة قبل التحسين وبعدهأتاح لنا الفرصة لتقليل حجم الصور من 2.5 ميغابايت إلى 756 كيلوبايت ، أي بنسبة 70٪. ومع ذلك ، نظرًا لحقيقة أن الصور لم يتم تحسينها مسبقًا ، فقد تم ضغطها أثناء إنشاء ملف APK النهائي. اتضح أن التحسين أدى إلى انخفاض حجم التطبيق الذي قام المستخدم بتنزيله بمقدار 500 كيلوبايت فقط.بعد ذلك ، أدركنا أننا استنفدنا بالفعل جميع إمكانيات التحسين السريع. يتطلب الاستمرار في تحسين الموارد إما جهودًا كبيرة أو تحسينات طفيفة فقط.تفاعل تحسين حزمة جافا سكريبت الأصلية
بعد أن اكتشفنا موارد التطبيق الخاصة بمنصة Android ، حان الوقت لتحليل حزمة JavaScript. يمكن اعتبار تحسين الحزمة فكرة جيدة لثلاثة أسباب. أولاً ، يقلل من حجم ملف APK النهائي. ثانيًا ، يؤدي هذا إلى إطلاق أسرع للتطبيق ، حيث يجب على الجهاز JS الظاهري معالجة رمز أقل. أخيرًا ، والأهم من ذلك ، أنه يسرع تحديثات OTA التي نقوم بها عدة مرات في الأسبوع باستخدام CodePush .analy محلل حزمة وتحسين الشفرة
من أجل اتخاذ قرار بشأن كيفية تقليل حجم الحزمة ، أولاً ، كان عليك معرفة أكثر مكان في الحزمة. للقيام بذلك ، استخدمنا أداة مفتوحة المصدر ممتازة تتفاعل مع المحتوى الأصلي . بعد تحليل المشروع بمساعدته ، حصلنا على تصور حيث كان كل مجلد وكل تبعية للتطبيق موجودًا ، مما يشير إلى أحجام الكيانات المقابلة.لقطة للمكتبات والمجلدات الخاصة بقاعدة التعليمات البرمجية للواجهة الأمامية لتطبيق Mutual مع إشارة إلى الأحجاماكتشفنا أن الحجم الإجمالي للحزمة هو 5.49 ميجا بايت. يتم تمثيل 57.8 ٪ من هذا الحجم من خلال التبعيات من المجلدnode_modules، 27.5 ٪ - رمز التطبيق. ما تبقى ، لا يمكن تحديد الأداة المستخدمة من قبلنا. أثناء عملية تجميع الحزمة ، تم حذف الرمز غير المستخدم بالفعل ، لذلك ما رأيناه هو الرمز الذي يستخدمه التطبيق بالفعل. ولكن ، حتى مع مراعاة ذلك ، يمكنك دائمًا العثور على شيء يمكن تحسينه في الحزمة.أكبر تبعية للمشروع هوmath.js. تنفذ هذه المكتبة ، كما يوحي اسمها ، العديد من العمليات الرياضية. ليس لدينا حاجة خاصة لهذه المكتبة لأننا نقوم بجميع الحسابات الهامة على الخادم ، وبعد ذلك نقوم ببساطة بإرسال النتائج إلى التطبيق. عندما نظرنا إلى رمز التطبيق ، اتضح أن المكتبة تستخدم فقط لإجراء بعض العمليات البسيطة. على الأرجح تم استخدامه من قبل مطور عمل على كود الخادم فقط بحكم العادة. لقد استخرجنا بسرعة الطرق المناسبة من المكتبة وقمنا ببنائها في قاعدة الكود الخاصة بنا ، للتخلص تمامًا من هذه التبعية. هذا يسمح بتقليل حجم الحزمة إلى 4.64 ميجا بايت. رفض مكتبة واحدة فقط سمح بتقليل حجم الباقة بنسبة 15.5٪!كما ذكرنا من قبل ، نستخدم Storybook لتطوير واختبار المكونات. صحيح ، يجب أن تكون القدرات المقابلة متاحة فقط في البيئات المحلية والمتوسطة. لا يحتاج المستخدمون النهائيون إلى ذلك. وبفضل هذا ، استخدمنا المتغير ENVIRONMENTللتحكم في تضمين الجزء المقابل من التطبيق. على الرغم من أن هذا مناسب لتقييد الوصول ، إلا أن أداة الحزم لا يمكنها معرفة القيمة المكتوبة لهذا المتغير. بسبب هذا القيد ، سقطت جميع رموز Storybook في حزمة الإنتاج.لإصلاح المشكلة ، قمنا بعزل استيراد هذا القسم في ملف واحد. ثم أنشأنا نسختين من هذا الملف: أحدهما يتضمن Storybook ، والآخر مخصص للإنتاج ، والذي يحتوي على تخطيط المكون فقط. للتبديل بين هذه الملفات عند إعداد نسخة الإنتاج من الحزمة ، قمنا بكتابة برنامج نصي يتم تنفيذه قبل إنشاء المشروع وتغيير ملف إلى آخر. بفضل هذه الطريقة ، تمكنا من إزالة رمز Storybook بالكامل من الإصدار الإنتاجي للتطبيق ، وإزالة كل من التبعية node_modulesوالرمز المعتاد فيما يتعلق بتكوين "قصص" Storybook.تم تحديث مجلد Storybook بنسختين من ملف الفهرس.قلل هذان التغييران حجم الحزمة من 5.49 ميغابايت إلى 4.2 ميغابايت. هذا يعني أنه من بين أمور أخرى ، سيتم تحميل التطبيق بشكل أسرع وتحديث أسرع.كان حجم الحزمة النهائية 4.2 ميجا بايت.بعد كل هذه التحسينات ، قمنا مرة أخرى بتنزيل التطبيق في متجر Play. تم إبلاغنا الآن أن حجم ملف APK النهائي سيكون في النطاق من 10.5 إلى 13.7 ميجابايت. هذا ، بالنظر إلى حقيقة أن التطبيق كان في الأصل بحجم 26.8 ميغابايت ، يعني ببساطة انخفاضًا مذهلاً في حجم المشروع بنحو 60 ٪! لذلك ، كما قلنا في مقال أعده فريق Google Play ، يمكننا أن نتوقع تمامًا أن معدل تحويل المنشآت سيزيد بنسبة 3.75٪.مقارنة بين إصدار APK الأصلي للتطبيق وإصدار AAB النهائي ، حيث يتم إجراء جميع التحسينات الموضحة أعلاهملخص
نحن ، كمبرمجين موجهين للأعمال ، نعلم أن الشركات في بعض الأحيان ، من أجل تطوير أسرع للمشروع ، قد تستمر في زيادة ديونها التقنية. هذا ينطبق بشكل خاص على الشركات الناشئة الصغيرة مثل Mutual ، الذين يحاولون العثور على مكانهم في السوق. ولكن إذا لم تلاحظ هذا الدين ، يمكنك ارتكاب أخطاء مزعجة ، مثل إرسال 2 ميغابايت من صور الاختبار إلى الإنتاج واستخدام مكتبة ضخمة بلا مبرر. لا ينبغي السماح للديون التقنية بالخروج عن السيطرة وتسبب المشاكل.بالإضافة إلى ذلك ، غالبًا ما يحدث أن المطورين يفتقدون ببساطة الفرص المتاحة لهم لتحسين المشاريع. لذلك ، يوصى أحيانًا بتحليل مشاريعك بشكل نقدي. فقط للتحقق مما إذا كنت قد فقدت بعض الفرص لتحسين الحجم أو السرعة أو بعض الجوانب الأخرى للتطبيق بسرعة. استغرق الأمر يومين فقط لتحليل التطبيق وتخطيط العمل وإجراء تحسينات على المشروع ، مما سمح لنا بتقليل حجم التطبيق بنسبة 60٪. من الصعب التوصل إلى شيء آخر يمكن أن يؤدي إلى نفس النتائج في مثل هذا الوقت القصير.كيف يمكنك تحسين مشاريع React Native الخاصة بك؟