מדוע חשוב להיענות לאפליקציות

גודל האפליקציה ממלא תפקיד ישיר ברכישת משתמשים, שמירה ושביעות רצון כללית.מחקרים מראים כי עלייה של 10 MB בגודל ה-APD יכולה להפחית את ההמרה ב- 1% או יותר. באנדרואיד, גודל ה- Play Store מציג את גודל האפליקציה בולטת, ועל iOS, משתמשים לעתים קרובות צריכים לחכות להורדת גדולה מעל רשתות סלולריות, יישומים קטנים יותר יכולים גם ליהנות ממכשירי אחסון מהירים יותר, פחות, ולהפחית את הפחתת עלויות נתונים, במיוחד במקומות שבהם מתפתח של תוכנות רוחב פסבים, במקום שבו יישומים ניידים, למעט יישומים של קבצים ניידים, לחץ דם, או יותר, או יותר, לחץ דם, או יותר, כלומר, ייתכן שאפליקציות של יישומים ניידים, תכונות אבטחה, לא יכולות להשפיע על גבי אופציונליים של יישומים עבור יישומים ניידים.

הבנת התגובות Native Build Artifacts

לפני יישום אסטרטגיות אופטימיזציה, חיוני להבין מה מהווה את גודל היישום הסופי. אפליקציה של A React Native כוללת מספר שכבות:

  • (ב) לוגיקה יישום:0)avaScript ,(JavaScript סגסוגת:1) - כל לוגיקה היישום, כולל ספריות צד שלישי ותגובה עצמה, שנאספו לתוך קובץ JS יחיד על ידי מטרו.
  • (FLT:0) קוד בינארי בינארי (FLT:1) - הדפיס C++/Objective-C/Java/Kotlin קוד עבור כל אדריכלות (armeabi-v7a, הזרוע64-v8a, x86, x86 64 על אנדרואיד; 46, x86 64 על iOS).
  • (FLT:0) משאבים ראשונים (Asset ResourcesFLT:1) - תמונות, גופן, אודיו, וידאו וקבצי JSON מאוחסנים ב-Res/Resturnable (אנדרואיד) או במשאבים של החבילה (iOS).
  • (FLT:0) ספריות של ספריות FLT:1 - React Native עצמו, בתוספת כל מודולים ילידים (למשל, תגובה-native-Moderal-Moders) שמוסיפים קוד ומשאבים.
  • (ב) ,0) ,MetadataphFLT:1 - מציג קבצים, סמלים, מסך ההשקה, לוחות סיפורים וערכי מידע.

כל שכבה תורמת אחרת.על אנדרואיד, חבילת JavaScript מוטבע בתוך ה-API/AAB. ב- iOS, החבילה JS גרה בתוך חבילת האפליקציה לצד executables Native. הידיעה מהיכן המשקל מגיע מאפשר לך למקד אופטימיזציה בדיוק.

אופטימיזציה של נכסים - Beyond Basic Compression

אופטימיזציה של נכסים היא הפרי התלוי ביותר, אבל קבוצות רבות מפסיקות בדחיסה פשוטה. גישה עמוקה יותר מניבה חיסכון גדול יותר.

שימוש בתבנית צילום מודרנית

(ב- Android ו- HEIC ב- iOS מציעים 25-35% גודלי קבצים קטנים יותר בהשוואה ל-JPEG או PNG באיכות שווה ערך.עבור Android, מערכת ההפעלה Native ממירת את PNGs ל- WebP אם תמקם אותם ב- JPEG:0 תיקיות ותאפשר ל-FLT:1 ב-FLT:2 ב- iOS, השתמש בקטלוג נכסים לאחסון תמונות; Xקוד לאחר מכן יכול לשרת את ה-DI/GFPE עם ה-DIFLT/GPT/R.

גודל ודיכוי בבניית זמן

לעולם אל תצרוך נכסים ברזולוציה מלאה. השתמש בכלים כמו FLT:5 או תסריט בנייה המפחית תמונות לגודל התצוגה המקסימלי הנדרש.לדוגמה, סמל המוצג ב-48px לא צריך להיות רחב 1920px.שלב מחדש עם אובדן או אובדן באמצעות דחיסה של FLT:6, FLT 7, או שירותים מקוונים.

ביטול נכסים לא מנוצלים

לאורך זמן, פרויקטים מצטברים תמונות מורשת, צילומי מסך, ואנימציה.לרוץ כלי ניתוח סטטי כמו (FLT:8) (או תסריט מותאם אישית) לדגל נכסים שלא מתייחסים לאף אחד מ-FLT:9, או (FLT:10), או (FLT:11 אמירות.

עקבו אחרי Fonts

קבצים פונטיים מכילים לעתים קרובות אלפי גליפים לשפות רבות.אם האפליקציה שלך תומכת רק בדמויות לטיניות (או תת-קבוצה), להשתמש בכלי חתר גופני כמו FLT:12 או FLT:13 כדי לפס דמויות לא בשימוש.זה יכול להפחית קובץ גופן מ -200 KB עד 20 KB. עבור יישומים בינלאומיים, לשקול טעינה דינמית - רק להביא את תת-החלק מקומי ספציפי בזמן ריצה.

קוד פיצול ו- Lazy Loading - גישה שיטתית

חברת המטרו של React Native תומכת בפיצול החבילה JavaScript למגוון רחב של חלקים שניתן לטעון על הביקוש.טכניקה זו, הנקראת לעתים קרובות "פיצול קוד", מפחיתה את זמן ההורדה הראשוני והפסקה.

כיצד קוד פיצול עובד ב React Native

כברירת מחדל, מטרו מייצרת חבילה אחת JS. כדי פיצול, אתה צריך להגדיר מטרו עם גישה סידורית מותאם אישית (למשל, באמצעות FLT:14 או FLT) או חלופית, אתה יכול להשתמש React.lazy ו Suspense כדי לייבא באופן דינמי רכיבים בהפעלה, עם זאת, חבילות סינכרוניות אמיתיות דורשות מנגנוני טעינה בצד או חבילות משובצות ביותר כדי לעזור ל-"פתרונות אחרים" (בעיקר") כדי לעזור ל-"תוכנות אחרות"לדוגמא," הגדרות מסך" (למשל,"א) ל-זמנית) ל-"פתרונות אחרים,"א) ל-"פתרונות"א-"פתרונות"ת"א-"א"א"לדוגמא,"לדוגמא,"א-לדוגמא,"לדוגמא,"א) ל-לדוגמא,"א) ל-לדוגמא,"לדוגמא,"ל) ל-לדוגמא,"א-לדוגמא," (לדוגמה,"א) ל-בקיצור של קובץ ,"א) לשימוש פחות קובצי Cookie"ב-"א) ל-"א) ל-"א-"א) ל-"א-"תיקים"תיקים"א-"ת-"תיקים

המונחים: Lazy Loading

גם ללא קידוד מלא, אתה יכול לעצלן מרכיבים באמצעות תגובה.lazy:

const SettingsScreen = React.lazy(() => import('./Screens/SettingsScreen'));

עופות את הרכיב העצלן בגבולות FLT:17 עם ירידה UI דפוס זה defers לייבא את המודול עד הראשון להפוך, צמצום גודל החבילה הראשוני.עם זאת, לציין כי תגובה.lazy לבד לא יוצר קבצים פיזיים נפרדים - הקוד המרכיב עדיין ארוז לתוך הראשי JS True file-level מפוצל דורש שינויים בתצורת מטרו.

אסטרטגיות Preload

עבור תכונות קריטיות המשימה, אתה יכול לטעון חבילות נייר ברקע לאחר השקת האפליקציה. השתמש בספריות כמו FLT 18 לשרת חלקים באופן מקומי, או להטביע אותם כנכסים. על iOS, אתה יכול למנף את ה-API FLT:19 עבור משאבים על פי דרישה.המפתח הוא לאזן את הגודל הראשוני עם ביצועים נתפסים: רק מה המשתמש צריך מיד, ולאחר מכן להביא את שאר החלקים.

Leverage Proguard ו- R8 עבור Android

אנדרואיד בונה תועלת רבה מקוד מתכווץ וכלים obfuscation.

Proguard vs. R8

ProGuard הוא הכלי המסורתי; R8 הוא יורשו של גוגל שפועלת כברירת מחדל באנדרואיד Gradle Plugin 3.4.0 ומעלה. R8 הוא מהיר יותר אגרסיבי יותר להסרת קוד מת.

android.enableR8=true

וב[[1924]] [[1924]]]] [[1924]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]]]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]]]]]]] ו[[1924]], [[1924]], [[1924]], [[1924]]]]]]]], [[1924]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]]] ו[[1924]], [[1924]]]]]]]]]]]]]]]], [[1924]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]

כללי ProGuard עבור React Native

תגובה אינדיאנית מסתמכת על השתקפות ו- JNI קורא שניתן לשבור על ידי obfuscation אגרסיבי.You חייב לשמור שיעורים ושיטות מסוימות. השתמש בחוקים הבאים ב-FLT:25:

-keep class com.facebook.react.** { *; }
-keep class com.facebook.hermes.** { *; }
-keepclassmembers class * {
 @com.facebook.react.uimanager.annotations.ReactProp ;
}

כמו כן, יש לשמור על שיעורים בשימוש על ידי מודולים מקומיים (למשל, FLT:27) לבדוק את הייצור שלך לבנות ביסודיות - כלל חסר יכול לגרום לתאונות זמן ריצה.

מידות וBondle Size

אם אתה משתמש ב-Hermes (מנוע JavaScript של React Native), חבילת JS נוטה להיות מקודמת, אשר בדרך כלל 20-30% קטן יותר מהמקור JS הגולמי. Enable Hermes in your FLT:28 ו-FLT:29 (עבור אנדרואיד) או Podfile (עבור iOS).

הסרת תלות בלתי מנוצלת ו- Libraries

נעלי נפיחות בנפיחות בקלות.מפתחים רבים מוסיפים ספריות עבור תכונה אחת ולאחר מכן אף פעם לא להסיר אותם.

עקבו אחרי Yourתלויים

(ב) להשתמש בחבילות ברשימה אשר מותקנות אך לא מיובאות, כלי זה רק בודק יבוא ישיר בקוד JS שלך. for Nativeמודולים, עליך לבדוק באופן ידני את FLT:31 ו- iOS Podfile עבור פודפוס ללא שימוש.בנוסף, לבדוק את ה-FLT:32 עבור תלות במעבר כי למשוך בספריות כבדות (למשל, שירות קטן זה תלוי על ידי F:33LT).

להחליף לימוזינה כבדה עם חלופות אורר

לדוגמה, להחליף את ה-FLT:34 (70 KB מניין) עם ערכות UI עם (FLT-shakeable, -8 KB) או ה- API מובנה-inFLT:36. Swap מלא בערכת UI עם קבוצות מינימליות של רכיבים. השתמש בתכונות של פלטפורמה-native שבו ניתן להחליף את ה- WebView כי הוא לטעון PDFjs, צמצום גודלם של אנשים.

הסרת תלות במבחן ופיתוח מייצור

ודא כי חבילות כמו FLT:38, FLT:39 וכלים מבועתים נשללים מן הבניין השחרור. השתמש בבניית דגלים כדי לייבא אותם באופן תנאי רק בפיתוח.

עקבו אחרי Javascript Bundle

חבילת JS היא לעתים קרובות היצירה היחידה הגדולה ביותר של האפליקציה - לפעמים 2-10 MB ללא דיכוי.

מחיקת כורים ו- Dead Code Elimination

להקות מטרו כבר להשתמש UglifyJS או Terser במצב הייצור.אבל אתה יכול עוד להפחית את הגודל על ידי לאפשר תוסף בבל:40 כדי להפשיט FLT:41 הצהרות.בנוסף, להשתמש מטרות FLT:42 כדי למנוע תכונות transpiling כי הם תמיכה ילידת על ידי המטרה אנדרואיד / iOS גרסה (למשל, חץ, פונקציות, כמו גם, כמו nc /await).

עץ שטיפה

עץ רועד (dead Codeחיסול) ב-React Native מוגבל כי מטרו אינו תומך באופן מלא במודולים ES. עם זאת, באפשרותך לשפר את התוצאות על ידי ייבוא רק מודולים ספציפיים מהספרייה ולא כל הספרייה.

// Bad: imports the entire lodash bundle
import _ from 'lodash';
// Good: imports only the pick function (~5 KB)
import pick from 'lodash/pick';

(ב) ב[[1924]], [[1924]], [[1924]]]], [[1924]]

ממזר בונד

כפי שהוזכר תחת פיצול קוד, אתה יכול לחלק את החבילה לקבצים מרובים.תבנית מוכחת אחת היא ליצור חבילת "core" המכילה תגובה, React Native, וניווט, וחבילת "עסק" עם מסך האפליקציה שלך.זה מאפשר למשתמשים לעדכן רק את ההיגיון העסקי (הורדת קטנה יותר) ולקבל יתרון של HTTP caching אם מוגש לשרת.

אנליז Bundle

השתמש ב-FLT:46 כדי ליצור מפת עץ אינטראקטיבית של החבילה שלך.זה מגלה אילו ספריות לצרוך את החלל ביותר.לדוגמה, ייתכן שתמצא כי ספריית ההקצאה מוסיפה 500 KB, אשר ניתן להחליף גישה פשוטה יותר ערכי JSON.

פלטפורמות-Specific Size Reduction טכניקות

iOS: App Thinning ו- bitcode

(הופנה מהדף מהדורות של App-specific App וריאנטים של מכשירים, כך שמשתמשים מורידים רק את מה שהם צריכים.Enable Enable Enable Enable Enable Enable Enable:0BitcodeFLT:1 ב- Xcode (Build Settings) (Build Settings > Enable Bitcode) מאפשר ל-Apple ל-optimize ולעמוד קוד שלא בשימוש במהלך ההגשה, להוריד את גודל ההורדה.

עבור עוד יותר חיסכון, לאפשר ל-FLT:0 על-Demand Resources (ODR)Froval 1LT עבור נכסים כמו הצגת סרטונים או רמות משחק ברזולוציה גבוהה.ODR מאפשר לך לתייג משאבים ולהוריד אותם רק כאשר יש צורך, ישירות להפחית את גודל החבילה של App Store.

Android: App Bundle (AAB) ו-Split API

מעבר מ-API לאנדרואיד App Bundle (AAB) לתפוצה. AAB מייצרת איגרות חוב נפרדות לדחיסות, שפה וארכיטקטורה.זה יכול להפחית את גודל ההורדה ב- 30-50%, משום שמשתמשים מקבלים רק את הקוד והמשאבים למכשיר הספציפי שלהם.

בנוסף, השתמש ב-FLT:0.000 Android Dynamic DeliveryFLT:1 כדי לשנות את התכונות: להתקין את מודול הבסיס והורדת מודולים תכונה על הביקוש (דומה ל- iOS ODR).

מודולים: Opt for Hermes ו- TurboModules

להחליף את מנוע JavaScriptCore עם הרשאות בשני הפלטפורמות.Hermes מאגד את JS לקודש לפני הזמן, צמצום גודל החבילה וסטארט-אפ מעל פני השטח.עבור גרסאות ישנות יותר (0.71+), מאפשרות ל-FLT:0 New ArchitectureFLT:1 עם טורבוModules. TurboModules לאפשר מודולים מקומיים להיות טעון lazily, כלומר הקוד שלהם מקושר לא רק למודול הראשוני של JS אינו משמש למעשה.

מעקב ואופטימיזציה מתמשכת

אופטימיזציה גודל הוא לא משימה חד פעמית.לשלב אותו לתוך זרימת העבודה לפיתוח שלך.

קביעת תקציבי

Define aמקסימום של AP/AAB גודל (למשל, 40 MB עבור ההתקנה הראשונית) ואכיפתו במהלך כלי השימוש של CI. השתמש כמו FLT:49 או תסריטים מותאמים אישית המשווים את גודל הבנייה החדש נגד בסיס.אם גודל גדל מעבר לסף, הבנייה נכשלת והצוות חוקר.

אפקט גודל ב-Plats

הערה אוטומטית על יחסי ציבור בגודל החבילה JS, גודל בינארי יליד, וגודל הנכסים הכולל.שירותים כמו FLT:50 יכול להציע חלופות קלות יותר.

ניקיון תלוי קבוע

קבע ביקורת תלותית רבעונית. Remove Unuse חבילות, עדכון לגרסאות חדשות יותר שעשויות להיות מרוקנות, ולהחליף ספריות מונוליטיות עם מיקרו-ספריות.

משאבים חיצוניים לקריאה נוספת

  • (ב) דוק רשמי של ה-FLT:0 (React Native Docs: Optimizing FlatlisteurFLT) 1 (ביצועים אך קשורים להעלאת גודל)
  • (ב) ,0 Android Developers:הקטנת גודל ה-APFLT:1
  • (ב) ,0) ,(הופנה מהדף On-Demand Resources Guide)
  • (ב) ⁇ ⁇ ⁇ ⁇ ⁇
  • אתר האינטרנט הרשמי של ה-FLT:0 (Hermes Engine)

מסקנה

Reducing app size in React Native projects demands a multi-layered strategy that addresses assets, JavaScript bundle, native code, and dependency management. By adopting modern image formats, enabling Hermes and R8, splitting code and resources, and continuously monitoring size in CI, you can deliver apps that are fast to download, light on storage, and respectful of users’ data plans. The investment in size optimization pays off in higher conversion rates, better ratings, and lower churn — especially in global markets where every kilobyte matters. Start with an audit of your current build, prioritize the largest offenders, and iterate. Your users will thank you with every update they install.