RNパフォーマンス改善のための指標と改善

リクエスト回数

キャッシュするなど

ページの読み込み時間

の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では問題になりやすい？

使用しているライブラリのサイズの計測

改善手法

CPUアーキテクチャごとにAPKファイルを作成する

複数のアーキテクチャをサポートするJSCoreバイナリを保持する必要がなくなり、その結果、アプリのサイズが削減される

画像の圧縮をする

JSONデータも圧縮する

生のまま保存しない

アプリのサイズと、実際に触っているときの挙動の重さってそんなに関係あるの？

参考

Application size and performance on Android

同値だが再描画の原因になるものを省く

外側に出して解決する

code:ts

const bigListStyle = {width: '100%'}

const Main = () => (

....

<BigListPureComponent style={bigListStyle} {...manyOtherProps}/>

)

起動時間

アプリの起動時に全てのJSコードをメモリにロードするので時間がかかる

必要でないものも全て読み込むので。

改善手法

Lazy Loadを使用する

必要になったタイミングで読み込む

code:ts

module.exports = function(api) {

api.cache(true);

return {

};

};

開始時間が短縮され、バンドルサイズが小さくなり、メモリ使用量が少なくなる

スプラッシュスクリーン使うとか

momentを消す

InlineRequires

RN v0.59で入った

遅延ロードする

Expoではデフォルトで有効になっていない

code:ts

module.exports = function(api) {

api.cache(true);

return {

};

};