RNパフォーマンス改善のための指標と改善
from ReactNativeのパフォーマンス
リクエスト回数
キャッシュするなど
ページの読み込み時間
の7
単純に不要なものを出すなというもの
それはそうだが。
Slow navigator transitions
Navigator
navigationの遷移など
画像の最適化
Image caching in React Native for Android
React Native Image Optimization on Android
Animating the size of images for different UI view
Progressive Image Loading in React Native iOS
いくつかかいている
拡張子を変える
サイズを小さくする
placeholderを利用する
の２
expoでは使えないっぽい
メモリリーク
メモリ使用量とか
起動時にメモリリークを何度か起こしている
アプリのサイズ
特にAndroidでは問題になりやすい？
Proguardを使って圧縮するとよいらしい
使用しているライブラリのサイズの計測
改善手法
CPUアーキテクチャごとにAPKファイルを作成する
複数のアーキテクチャをサポートするJSCoreバイナリを保持する必要がなくなり、その結果、アプリのサイズが削減される
画像の圧縮をする
PNGの代わりにAPNGを使うなど
JSONデータも圧縮する
生のまま保存しない
アプリのサイズと、実際に触っているときの挙動の重さってそんなに関係あるの？
参考
Application size and performance on Android
一つ一つの文章が簡潔すぎて詳細がわからん
同値だが再描画の原因になるものを省く
FC時代に気にかけることの一例
例えば
style={{width: '100%'}} は、毎回Objectが新しく作られるので子の再描画の原因になる外側に出して解決する
tsconst bigListStyle = {width: '100%'}
const Main = () => (
....
<BigListPureComponent style={bigListStyle} {...manyOtherProps}/>
)Why Did You Renderを使うと気付くことの補助になる
起動時間
アプリの起動時に全てのJSコードをメモリにロードするので時間がかかる
必要でないものも全て読み込むので。
改善手法
Lazy Loadを使用する
必要になったタイミングで読み込む
Expoでは、
babel-preset-expo の lazyImports を使うtsmodule.exports = function(api) {
api.cache(true);
return {
presets: [['babel-preset-expo', { lazyImports: true }]],
};
};Hermesを使用する
Expoでどうやって使用するの #??
開始時間が短縮され、バンドルサイズが小さくなり、メモリ使用量が少なくなる
スプラッシュスクリーン使うとか
AppLoadingとか？
重いライブラリを使用しない ref
momentを消す
InlineRequires
RN v0.59で入った
遅延ロードする
Expoではデフォルトで有効になっていない
babel-preset-expoの
lazyImports を設定するtsmodule.exports = function(api) {
api.cache(true);
return {
presets: [['babel-preset-expo', { lazyImports: true }]],
};
};