[譯]React Native性能優化指北
譯注： 本文并沒有詳細的介紹具體的性能優化做法，作者給出的是一系列方法，需要我們自己根據實際情況，去采納有用的一些點。
原文鏈接： https://blog.usejournal.com/getting-started-optimizing-a-react-native-app-1d7507c2d849
過去這一年，我都在持續地對一個業務規模龐大的銀行APP進行性能優化。到目前，我們成功的在一臺性能比較差的 華為P20 Lite 上，將 TTI 從14秒縮短到了2.5秒左右。下面是在這些性能優化中，我們總結出來的一些經驗。
0. 找出問題所在
在性能優化過程中，一個常見的錯誤是，嘗試一次搞定所有的性能問題。正確的做法是，找到一臺性能比較差的Android機器，安裝你的APP，進行一系列完整的業務操作，去感受你的APP在低端Android機上的性能表現如何。可以問問你自己，用戶用你的APP最常用的一些功能？哪些操作路徑，是關于用戶體驗的核心部分？
試試去掉所有動畫 —— 你的APP運行的怎么樣？
去掉網絡請求，再來渲染你的頁面 —— 你的APP還是慢嗎？
試試刪除某個組件 —— 頁面渲染時間有沒有顯著提升呢？
找出頁面渲染的所有相關邏輯，什么時候會執行網絡請求，什么時候會渲染某些新的組件。只有當你找到導致APP性能問題的關鍵元素，你才有可能去修復它。
1. 性能測試，性能測試，還是性能測試
譯注： 作者還真是重要的事說三遍啊。
每次做性能優化的時候，都需要測量你的某些改動，帶來的影響。具體怎么來測量呢？使用一個秒表，使用 react-native-debugger ，或者其他的第三方工具？在 react native 性能測試中，沒有銀彈，每個人遇到的問題可能千差萬別，因此，在你做出性能優化的改動前后，進行可靠的性能數據測試，是至關重要的。
我之前寫過 另一篇長文來討論性能測試 ，如果你感興趣的話，你可以點過去看看 ??。
2. 可視化你的bundle大小組成
react-native-bundle-visualizer 是一個強大的工具，它可以用來分析你的bundle大小。看這個包名也知道，這個工具會執行react native 代碼的打包，將最終bundle的大小可視化，并且可以查看bundle的大小具體來自哪些部分，是我們頁面邏輯，還是來自 node_modules 。你可以看下，有沒有一些文件或者npm包，占據了特別比較大的文件大小。你真的需要 moment.js 么，希望它不會占據你bundle大小的6%……
3. 只有當你用到的時候，才去加載對應代碼/資源
只有當要用到某部分代碼的時候，才去加載對應代碼
這是縮短APP首次啟動時間最有效方法之一。在react native 項目里，代碼懶加載超出了它本來應有的復雜度，但是這絕對值得我們去做。通過代碼懶加載，我們的一個項目，即使在我們能找到的最慢的Android機器上，也將APP的啟動時間從14秒縮短到了4秒！
react native 官方性能優化部分 是這方面最好的資源之一。
延遲加載非關鍵的數據
你可能在很大APP里都看到過這個技術，通常在頁面初始階段，請求渲染首屏依賴的數據，在首屏展示之后，才去加載剩余部分的頁面數據。這個視頻 詳細的講解了這個技術。
4. 優化并且標準化圖片資源
在react native項目中，通過很小的成本去優化靜態資源(通常是圖片)，就能獲得比較大的性能提升。
為什么呢？每個設計師到處PNG圖片的姿勢可能是不同的，當你和多個設計師合作的時候，他們導出PNG圖片的設置可能存在差異。
你可以使用一些軟件，比如 ImageOptim ，去優化你的圖片大小，甚至將整個流程自動化，就像 這篇文章一樣 。
5. 善于利用感知性能
性能優化，并不只是追求縮短代碼執行時間，我們最終的目的，是讓用戶在使用APP的時候，感覺到流暢。感知性能優化，是你能利用的一個技巧，來讓用戶感覺APP運行的很快、很流暢。有一些方式，比如 讓用戶停留在歡迎界面，直到JavaScript代碼加載完成 ，或者使用 react-native-shimmer ，都可以優化用戶感知性能。
6. 盡可能的使用開源組件，并保持他們是最新版
在我工作過程中，我意識到了一個比較尷尬的事情，作為APP開發者，我們基本上不可能寫出比開源組件更好的代碼。成千上萬的開源軟件貢獻者、他們擁有的完整的測試設備以及開源作者的知識水平，大多數情況下，都遠遠超出了我們公司或者小組的成員。
在過去的兩年里，react native社區都在集中精力進行性能優化，特別是核心團隊最近的幾次大的升級，在 0.59 版本升級 JSC ，在 0.60.2 版本發布了 Hermes 。
7. 重寫你的動畫
動畫卡頓，通常更容易讓用戶察覺到APP的性能問題。在JS線程執行動畫，很容易引起性能問題，導致動畫的卡頓。相反，將動畫交給native線程來運行，能避免這個問題。大多數的動畫，都可以使用 Animated 并且設置 useNativeDriver:true 來實現。
8. 避免過早的優化細節
譯注 ：作者應該就是讓我們抓住問題的主要矛盾，先解決 二八原則 中的 80% 部分。
細小的點，通常不是引起APP性能問題的罪魁禍首。
9. 性能優化：痛并快樂著
APP性能優化需要持續的投入很多精力，這和APP架構不太一樣——但是，性能優化的過程，也讓我們有機會對react內部的機制有了更好的理解。
希望你喜歡這篇文章 ??。
推薦閱讀
我強烈推薦 這個react native性能優化的視頻 ，它非常實用，很容易結合我們實際情況進行實踐。react native 官方團隊的 react native性能優化 非常值得學習。
