Neden Reaksiyon Yerli Uygulamaları Için App Boyut Maddeleri

App boyutu, kullanıcı satın alma, tutma ve genel memnuniyetinde doğrudan bir rol oynar. Araştırmalar, 10 MB'nin, parfüm büyüklüğündeki artışların% 1 veya daha fazla indirmesini sağlayabileceğini gösteriyor. Android'de, Play Store ekranları belirgin bir şekilde güncelliyor ve iOS'ta kullanıcılar, genellikle büyük güncelleştirmeleri beklemeli, daha hızlı yükleme ve güvenlik risklerine yol açabilir.

Reaksiyon Yerlisi Anlaşılan Maddeleri Anlayın

Optimizasyon stratejilerine başvurmadan önce, nihai uygulama boyutunu oluşturan şeyleri anlamak önemlidir. A Reaks Yerli uygulaması birkaç katman içerir:

  • [FONT:0]JavaScript paketi[[[Dönetici: 1 ) - üçüncü taraf kütüphaneler ve Reaktör kendi dahil olmak üzere tüm uygulama mantığı, Metro tarafından tek bir JS dosyasına derlendi.
  • [FONT=0]Native code binaries[[Dönetici: 0,6, x86 64, Android üzerinde çalışır.
  • [FONT:0)Kaynak kaynakları[Döneticiler, fontlar, ses, video ve JSON dosyaları yeniden kullanılabilir (Android) veya paket kaynaklar (iOS) olarak depolanır.
  • [FONT:0)Depres kütüphaneleri - Reaks Yerli kendi artı herhangi bir yerli modül (örneğin, tepki-natif-camera, re-native-maps) derlenen kod ve kaynakları ekler.
  • [FONT:0]Metadata[[[DÜT:1] - açık dosyalar, ikonlar, ekranlar, hikaye dolapları ve Info.plist girişleri.

Her katman farklı katkıda bulunur. Android'de JavaScript paketleri, PowerPoint/AAB'nın içinde gömülüdür. iOS'ta, JS paketleri yerel ekinlerin yanında uygulama paketinde yaşar. ağırlık nereden geldiğini bilmek tam olarak optimizasyonları hedeflemenize olanak sağlar.

Varlıkları optimize edin - Temel Kombinasyonların Ötesinde

Varlık optimizasyonu en düşük meyvedir, ancak birçok takım basit bir sıkıştırmada durur. Daha derin bir yaklaşım daha büyük tasarruf sağlar.

Modern Image Formats kullanın

WebP Android ve iOS'ta 25-35% daha küçük dosya boyutları, JPEG veya PNG'ye eşdeğer kalitede kıyasla% 35 daha küçük dosya boyutları sunar.For Android, Reaks Yerli inşa sistemi otomatik olarak PNG'leri WebP'ye gönderirseniz onları bir klasörde getirir ve 1'i USBT'ye sunar:2. iOS'ta, Asset Catalogs'ları görüntülere indirmek için kullanabilirsiniz; Xcode o zaman en iyi formatı (Expence'a geri çekilmek için) çalıştırın.For cross-platform görüntüleri için bir CDN'den gelen görüntüler için, WebP'ye hizmet edin.

Zaman İnşa Edilmiş ve Tamamlayıcı

Hiçbir zaman tam çözünürlüklü varlıklar toplayın. $ 16.Dörtücükler veya ücretsiz olarak kullanılan bir senaryoyu kullanın. Örneğin, 48px'de gösterilen bir ikon, 1920'li yılların büyük bir kısmını telafi etmek zorunda değildir.

Kullanılmamış Varlıklar

Zaman içinde, projeler bir miras görüntüler, ekran görüntüleri ve animasyonlar.Onlara veya paketlerden referans alınmayan statik bir analiz aracı çalıştırın.

Subset Fonts

Font dosyaları genellikle birçok dil için binlerce roglif içerir.Eğer uygulamanız yalnızca Latin karakterleri desteklerse (veya bir alt set), kullanım süresi boyunca sadece yerel alt sıralı bir alt kategoriye sahip olun.

Kod Bölünme ve Lazy Yükleniyor - Sistematik Yaklaşım

Reaksiyon Yerli'nin Metro paketleyicisi JavaScript paketlerini talep üzerine yüklenebilir bir çok chunks'a bölmeyi destekler.Bu teknik, genellikle “kolay bölme” olarak adlandırılır, ilk indirme ve parse süresini azaltır.

Reaksiyon Yerlisinde Nasıl Çekilir?

Varsayılan olarak, Metro tek bir JS paketi üretir. bölmek için, Metro'yu özel bir serileştirme yaklaşımıyla yapılandırmanız gerekir (örneğin, [[DÜŞÜNCÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜ

Enis'i Uygulamak

Tam kod açmadan bile, Reakül kullanarak tembel yük bileşenleri kullanabilirsiniz:

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

Bir sonbahar arayüzü ile tembel bileşeni yuvarlan.Bu model defers ilk forma kadar modül ithal eder, ilk paket boyutunu azaltır. Ancak, sadece Reak.lazy'nin ayrı fiziksel dosyaları oluşturamayacağı dikkat edin - bileşen kodu hala ana JS'ye paketlenir.

Preload Strategies

Görev-kritik özellikler için, uygulama başlatıldıktan sonra arka planda chunk paketlerini önceden yükleyebilirsiniz.Sadece kullanıcı ihtiyaç duyduğu şeyleri hemen yerine getirmek için, geri kalanını hemen geri getirmek için. iOS'ta, size istenen API'den yararlanabilirsiniz.

Android için ProGuard ve R8'i

Android kod küçülme ve obfuscation araçlardan ağır faydalanıyor.

ProGuard vs. R8

ProGuard geleneksel araçtır; R8, Android Gradle Plugin 3.4.0'te varsayılan olarak çalışan Google'ın yeni başlayanlardır ve R8 ölü kodu kaldırmada daha hızlı ve daha agresiftir. R8, R8'i sağlamak için, ESRA'nızı sağlar:

android.enableR8=true

Ve inFLT:22) ayarlandığında, ayarlanan ve [[DörtÜyetim: AİHM'nin şifresini içeren ve hem Java/Kotlin kodu hem de Reaks Yerli C++ kodu optimize edecek.

Reaksiyon için Özel ProGuard Kuralları

Reaksiyon Yerlisi, agresif obfuscation tarafından kırılabilir olan yansıma ve JNI çağrılarına dayanmaktadır. Belirli sınıfları ve yöntemleri tutmanız gerekir.

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

Ayrıca yerli modüller tarafından kullanılan sınıflar (örneğin, [[Dörtücük|S.) Üretiminizi iyice test edin - eksik bir kural, zaman çökmelerine neden olabilir.

Hermes ve Sche Boyut

Hermes'i (React Native's JavaScript motoru) kullanıyorsanız, JS paketleri kodlanmış durumda, bu da genellikle% 20-30'u çiğ JS kaynağınızdan daha küçük.Enable Hermes in yourİLFLT:28) ve [[ iOS için) veya Podfile ( iOS için) anlamına gelir.

Kullanılmamış Bağlanmalar ve Kütüphaneler

Bağlantılı bloat kolayca. Birçok geliştirici tek bir özellik için kütüphaneler ekler, sonra onları asla çıkarmaz.

Denetlemen

[[Kategori: · 10.30.000.com.tr|kullanılan Pods için liste paketlerine ait olarak, yalnızca JS kodunuzda doğrudan ithalat kontrol eder.For native modüller için, manuel olarak incelenmelidir.For native Modules.For native Modules, you must manually reviewENFLT:31} and iOS Podfile for unuseFLT:32 for Transitionive dependencies that pullive dependencies that pull in heavy library (e.g.

Işık Alternatifleri ile Ağır Kütüphaneleri Değiştirin

Örneğin, API'nin minimum bileşenleri ile oluşturulan API'leri yerine getir.Use platform-native features where possible: 03.03.2012 by a WebView that load a PDF.js viewer, the built-inurfeat. API. Swap full-urfeat UI kits with minimal components.Use platform-native features where possible: 03.03.

Test ve Geliştirme Üretimden Bağlanma

Bu paketlerin sadece gelişimde gerekli olmasını sağlamak için bayraklar oluşturmak için, bu paketler için kullanılabilir.

JavaScript Schen'ı optimize edin

JS paket genellikle uygulamanın en büyük tek parçası - bazen 2-10 MB etkilenmez.

Minification and Dead Code Elimination

Metro paketleri zaten UglifyJS veya Terser'i üretim modunda kullanıyor.Ama Babel pluginMIZT:40'a izin vererek büyüklüğü daha da azaltabilirsiniz. ”Ayrıca, [[Şamping özelliklerini kullanarak hedef Android/iOS versiyonu tarafından desteklenen hedefler kullanabilirsiniz (örneğin, ok işlevleri, async/await).

Ağaç Shaking

Reaksiyon Yerlisi'nde ağaç salması sınırlı olduğundan, Metro ES modüllerini tamamen desteklemiyor. Ancak tüm kütüphaneden ziyade sadece belirli modülleri ithal ederek sonuçları geliştirebilirsiniz. Örneğin:

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

Kuralı ile ilgili olarak, granular ithalatı uygulamak için kural olarak, YÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜŞÜŞÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜŞÜŞÜŞÜŞÜŞÜŞÜŞÜŞÜŞÜŞÜNÜ

Scheting

Kod bölmesi altında belirtildiği gibi, paketleri birden çok dosyaya ayırabilirsiniz. kanıtlanmış bir model, Reaktif, Reaktif Yerli ve navigasyon içeren bir “iş” paketi ve uygulama ekranlarınızla birlikte bir "iş" paketi oluşturmaktır. Bu, kullanıcıların yalnızca iş mantığını güncellemelerini sağlar (küçük indirmeler) ve bir sunucudan hizmet ederseniz HTTP kalibrasyonunu elde etmek.

Analyze Sche Piano

Örneğin, yerelleştirme kütüphanesinin daha basit bir anahtar değerli JSON yaklaşımıyla değiştirebileceğini görebilirsiniz.Bu, kütüphanelerin en fazla alanı kullandığı ortaya çıkıyor. Örneğin, yerelleştirme kütüphanesinin 500 KB'yi oluşturduğunu, bu aracı daha basit bir anahtar değerli JSON yaklaşımıyla değiştirebileceğini bulabilirsiniz.

Platform-Specific Boyut Azaltı Teknikleri

iOS: İnceleme ve Bitcode

App inceltme, cihaza özel uygulama varyantlarını oluşturur, böylece kullanıcılar yalnızca ihtiyaç duydukları şeyi indirmektedir. EnableMAZFLT:0)Bitcode[Döneticileri -> Enable Bitcode -> Evet). Bitcode Apple'ın yükleme ve şerit kullanılmamış kodu geri yüklemesi için izin verir ve yükleme boyutunu kullanabilirsiniz.

Daha fazla tasarruf için, ESFLT:0)On-Demand Kaynakları (ODR)), introductory videoları veya yüksek çözünürlüklü oyun seviyeleri gibi varlıklar için. ODR, yalnızca gerekli olduğunda kaynakları etiketlemenize ve indirmenize izin verir, doğrudan ilk App Store paketi boyutunu azaltır.

Android: App Sche (AAB) ve Split Puls

PowerPoint'den Android App Sche (AAB) dağıtım için geçiş. AAB, yoğunluk, dil ve mimarlık için tatilleri bölüyor. Bu, indirme boyutunu% 30-50 azaltabilir çünkü kullanıcılar sadece belirli cihaz için kod ve kaynakları elde ederler.InurFLT:47).

Ek olarak, Android Dinamik Teslimat[Döneticileri değiştir]: Temel modülleri kurmak ve talep üzerine özel modüller indirmek ( iOS ODR'ye benzer).

Yerli Modüller: Hermes ve TurboModules için Opt

JavaScriptCore motoru her iki platformda da bir araya getirin. Hermes JS'i zaman önce kodlayarak, paket boyutunu ve başlangıç yükünü azaltır.For newer Reaction Native versions (0.71+), ESFLT:0) TurboModules ile derlenen yeni mimari).

İzleme ve Sürekli Optimizasyon

Boyut optimizasyonu bir tek zamanlı görev değildir. onu gelişim iş akışınıza entegre eder.

Boyut Bütçeleri

Bir sonraki modele karşı yeni inşa boyutunu karşılaştıran veya özel senaryolar kullanarak, yapı başarısız olur ve ekip araştırmalarını uygular.

Pull Requests'te Boyut Etkisi

PR'lerde, JS paket büyüklüğü, yerli ikili boyutu ve toplam varlık büyüklüğü hakkında otomatik olarak yorum yapın.Specinterneting Teams to review boyut etkisini performans etkisini eleştirel olarak gözden geçirmek için.

Düzenli Bağımlılık Temizlenme

Ortada bir bağımlılık denetimi ayarlayın. Kullanılmamış paketler, shrunk olabilecek yeni sürümlere güncellemek ve mikro-libraries ile monolithic kütüphaneleri değiştirmek.|alışan paketler, kullanılmamış paketleri tanımlamaya yardımcı olabilir.

Dış kaynaklar için daha fazla okuma

  • [0]Anadolu Resmi Docs: Optimizing Flatlist[[Döneticileri oluşturmakla ilgili)
  • [0] Android Geliştiriciler: Korku Boyutu[Dönüşünmeler:0)[Dönetici:0)
  • [0] Apple: On-Demand Kaynaklar Kılavuzu).
  • [FONT:0]react-native-bundle-işitselizer).
  • [0]Hermes Engine Resmi Sitesi[Dönemli: 1 )

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

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.