نصائح لتقليل حجم تطبيقات الموبايل المصممة بـ فلاتر Flutter

هل سبق لك نشر تطبيق Flutter وتفاجأت بحجم التنزيل الكبير؟ إليك بعض الطرق لجعل تطبيقك أصغر ويوفر للمستخدمين في مساحة التخزين.

الصور 🔗

• استخدم أيقونات SVG عالية الجودة: بدلاً من استخدام صيغ JPG أو PNG الكبيرة، استخدم رسومات المتجه القابلة للتوسيع (SVG) للرموز والصور المتجهة. تتمتع أيقونات SVG بحجم أصغر بكثير ولن تفقد جودتها عند تغيير حجمها لشاشات مختلفة.

• استغل قوة WEBP: بالنسبة للصور، يمكنك التفكير في استخدام WEBP بدلاً من JPG أو PNG. يوفر جودة صورة مشابهة ولكن بحجم أصغر (حوالي 25٪ أصغر!). يمكنك مراجعة دليل مطوري Google لمزيد من المعلومات حول WEBP: https://developers.google.com/speed/webp .

التخلص من العناصر غير المستخدمة 🔗

يمكن لـ Flutter إزالة الرموز غير المستخدمة من الخطوط مثل Material و Cupertino و FontAwesome. تسمى هذه العملية “التخلص من الشجرة” (tree shaking).

• التخلص من الأشياء غير المستخدَمة على iOS: هل تبني التطبيق باستخدام Xcode؟ قم بتعيين متغير البيئة TREE_SHAKE_ICONS.

• التخلص من الأشياء غير المستخدَمة على Android: أضف خاصية tree-shake-icons إلى ملف gradle.properties الخاص بك.

عظمة الضغط 🔗

نعلم جميعاً كيفية ضغط صور JPG و PNG، ولكن هل تعلم أنه يمكن أيضاً ضغط صور SVG و WEBP؟

• اضغط تحريك الرسوم المتحركة: اضغط على تلك الرسوم المتحركة لتوفير مساحة!

• استخدم ضغط gzip على كل شيء: استخدم ضغط gzip لتقليل حجم الملفات مثل ملفات اللغة (JSON). يوضح مقتطف الكود المقدم كيفية استخدام gzip لضغط ملف. يمكنك العثور على مزيد من المعلومات حول هذه التقنية هنا .

final String response = await rootBundle.loadString('assets/en_us.json');
List<int> original = utf8.encode(response);
List<int> compressed = gzip.encode(original);
List<int> decompress = gzip.decode(compressed);
final enUS = utf8.decode(decompress);

نصائح خاصة بنظام Android 🔗

• استفد من Proguard: يساعد Proguard في تقليص حجم وتحسين الكود الخاص بك. تتضمن الإرشادات خطوات لإضافة قواعد Proguard إلى ملفات android/app/build.gradle و android/app/proguard-rules.pro الخاصة بك. يمكنك الاطلاع على هذه المقالة لمزيد من المعلومات حول Proguard.

  أضف إلى ملف android/app/build.gradle

  android {
    buildTypes {
      getByName("release") {
        // يسمح بتقليص الكود والتحسين
        minifyEnabled = true
        // يسمح بتقليص الموارد
        shrinkResources = true
        // يسمح بقواعد Proguard
        proguardFiles(
          getDefaultProguardFile("proguard-android-optimize.txt")),
          "proguard-rules.pro"
        )
      }
    }
  }
  

  أضف إلى ملف android/app/proguard-rules.pro

  ## Flutter wrapper
  -keep class io.flutter.app.** { *; }
  -keep class io.flutter.plugin.** { *; }
  -keep class io.flutter.util.** { *; }
  -keep class io.flutter.view.** { *; }
  -keep class io.flutter.** { *; }
  -keep class io.flutter.plugins.** { *; }
  -keep class com.google.firebase.** { *; } // قم بإلغاء تعليق هذا إذا كنت تستخدم firebase في المشروع
  -dontwarn io.flutter.embedding.**
  -ignorewarnings
  

• عمل Obfuscation للأمان والحجم: يؤدي الـ obfuscation للكود الخاص بك إلى صعوبة فهمه ويقلل من حجمه. تتضمن الإرشادات روابط حول كيفية تمكين التشويه لنظامي التشغيل Android و iOS.

  لـ Android، أضف هذا السطر إلى الملف /android/gradle.properties

  extra-gen-snapshot-options=--obfuscate
  

• خطوط Google حسب الطلب: استخدم حزمة google_fonts لتنزيل الخطوط بشكل ديناميكي فقط عند استخدامها من قبل تطبيقك. يوفر هذا مساحة عن طريق تجنب أشكال الخطوط غير الضرورية. يمكنك الاطلاع على الحزمة على pub.dev: https://pub.dev/packages/google_fonts .

• تخزين الصور المؤقتة: تقوم حزمة cached_network_image تلقائيًا بتخزين الصور التي تم تنزيلها مؤقتًا، مما يوفر المساحة وعرض النطاق الترددي. تجدها على pub.dev: https://pub.dev/packages/cached_network_image .

• أقوى التحسينات: قم بتمكين التحسينات الأكثر قوة في ملف android/gradle.properties الخاص بك لإزالة الكود غير المستخدم ودمج الفئات، مما يؤدي إلى تطبيق أصغر. وذلك عن طريق إضافة هذا السطر android.enableR8.fullMode=true. لمزيد من المعلومات، اقرأ هذا الدليل من AndroidDeveloper .

• ضغط المكتبات الأصلية: قلل من حجم المكتبات الأصلية لتوفير مساحة على الأجهزة. راجع الرابط المقدم لمزيد من المعلومات. أضف هذا السطر android.bundle.enableUncompressedNativeLibs=true إلى نهاية هذا الملف android/gradle.properties. اقرأ المزيد حول هذا الموضوع على StackOverflow .

• إزالة معلومات الـ Debug: إزالة معلومات الـ debug من الكود تقلل حجم ملف الـ apk بشكل ملحوظ. استخدم هذا الأمر للحصول على تطبيق بدون معلومات الـ debug flutter build appbundle --split-debug-info=/<path-to-export>.

فكّر مقدماً: الأجزاء المؤجلة (Deferred Components) 🔗

تسمح لنا Flutter بأن نبني تطبيقات تقوم بتنزيل إمكانيات وأجزاء عند الإحتياج لها أثناء استخدام التطبيق. هذه الميزة تقلل حجم تنزيل التطبيق وتجعل المستخدمين الذين يريدون الإمكانيات فقط هم من يتم تنزيلها على هواتفهم. اعرف أكثر عن هذه الخاصية الرائعة deferred components على الشروحات الرسمية لـ Flutter من هنا .

ابحث عن الأجزاء الضخمة 🔗

• تحديد الحزم الثقيلة: استخدم الأمر flutter build مع العلم --analyze-size لتحديد الحزم الكبيرة في تطبيقك. تعرض الإرشادات أوامر محددة لتحليل حزم تطبيقات Android، وتطبيقات Android APK، وإصدارات iOS.

  لتطبيق حزمة Android:

  flutter build appbundle --target-platform android-arm64 --analyze-size
  

  لتطبيق Android APK:

  flutter build apk --target-platform android-arm64 --analyze-size
  

  لـ iOS:

  flutter build ios --analyze-size
  

باتباع هذه النصائح، يمكنك تقليل حجم تطبيق Flutter الخاص بك بشكل ملحوظ، مما يجعله ممتعًا للتنزيل والاستخدام.

المراجع والمصادر (باللغة الإنجليزية) 🔗

• تقليل حجم ملف apk : https://developer.android.com/topic/performance/reduce-apk-size
• تقليل الكود : https://developer.android.com/studio/build/shrink-code
• تقليل حجم تطبيقات Flutter : https://suryadevsingh24032000.medium.com/size-matters-reducing-flutter-app-size-best-practices-ca992207782
• تقليل حجم تطبيق Flutter : https://itnext.io/reducing-flutter-app-size-570db9810ebb
• عمل تشفير obfuscation لتطبيقات Flutter : https://newbedev.com/how-to-obfuscate-flutter-apps

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