React是一個廣泛流行的用於構建使用者介面的JavaScript庫。它的宣告性、JSX語法和虛擬DOM的結合使其成為編寫UI程式碼的絕佳選擇。然而，構建效能良好的大規模React應用程式可能是一個挑戰。隨著你的應用程式的複雜性增加，你可能會注意到其效能的下降，這可能會嚴重影響使用者體驗。因此，必須優化你的React應用程式的效能，以確保它的快速、響應和高效。
在這篇文章中，我們將探討你可以使用的最佳優化技術，使你的React應用程式執行得更快。我們還將討論識別效能瓶頸，避免的常見陷阱，以及優化你的應用程式效能的具體策略。
1. 使用瀏覽器效能工具
檢查你的應用程式效能的最有效方法是通過你的網路瀏覽器。有幾個瀏覽器內的工具可以給你準確的測量，並確定你的程式碼可能會減慢的地方。Lighthouse就是這樣一個工具。
Lighthouse擴充套件是檢查應用程式基本效能的一個好方法。除了檢查效能之外，Lighthouse還將檢視你的網頁的可訪問性，以及你是否遵循了網路的最佳實踐。它將檢查你的網頁是否針對搜尋引擎機器人進行了優化，並將檢視你的網路應用程式是否符合漸進式網路應用程式的標準要求。
使用Lighthouse檢查網站效能
你可以通過兩種方式執行Lighthouse的審計：在命令列或在瀏覽器中。如果你想在命令列上執行審計，你首先需要安裝Lighthouse命令：
$ npm install -g lighthouse
然後，你可以用lighthouse命令執行審計：
$ lighthouse http://localhost:3000
Lighthouse的命令列版本只是一個用於Google Chrome瀏覽器的自動化指令碼。它的優點是可以生成HTML審計報告，這使它適合在持續整合伺服器上使用。你也可以在谷歌瀏覽器中互動式地使用Lighthouse。最好是在隱身視窗中進行，因為這樣可以減少其他擴充套件程式和儲存對Lighthouse審計的干擾。啟動Chrome瀏覽器並開啟你的應用程式後，進入開發者工具，然後切換到Lighthouse標籤。
然後點選 “Generate audit” 按鈕。Lighthouse會多次重新整理你的頁面，並進行一系列的審計。效能審計將集中在六個不同的指標上。這些指標被稱為Web vitals。當應用程式在生產中執行時，網路生命體是你可以用來跟蹤效能的指標。
現在我們瞭解瞭如何檢查我們的React應用程式的效能，讓我們深入研究可以幫助優化其效能的具體技術。
2. 使用React.Suspense和React.Lazy來實現懶惰載入元件
懶載入元件可以通過減少初始載入時間來顯著提高你的React應用程式的效能。懶載入的理念是隻在需要時才載入一個元件。React捆綁了React.Lazy和React.Suspense API，這樣你就可以把動態匯入作為一個常規元件來渲染。在這裡，不要像這樣載入你的常規元件：
import LazyComponent from './LazyComponent';
你可以通過使用懶惰的方法來渲染一個元件來減少效能的風險。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
React.lazy需要一個必須呼叫動態import()的函式。然後，這將返回一個Promise，該Promise解析為一個包含React元件的預設匯出模組。
懶惰元件應該在暫停元件內呈現，這允許你在等待懶惰元件載入時新增回退內容作為載入狀態。
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading....</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
3. 用Memo對React元件進行改造
React.memo是一個函式，你可以用它來優化純函式元件和鉤子的渲染效能。它在React v16.6.中被引入。
Memo源自於memoization。這意味著用React.Memo包裝的函式的結果被儲存在記憶體中，如果它被再次呼叫相同的輸入，則返回快取的結果。
現在，讓我們看看它是如何工作的。
基本用法如下，你必須將你的函式元件包裹在React.memo()函式中。這傾向於用內聯式的函式看起來更好：
const Title = React.memo(() => {
let eventUpdates = React.useRef(0);
return (
<div className="black-tile">
<Updates updates={eventUpdates.current++} />
</div>
);
});
這個小小的改變將幫助你提高你的元件的渲染效能。
4. Tree-shaking
Tree-shaking是現代JavaScript應用程式中使用的一種技術，用於消除最終捆綁的未使用程式碼。在一個大型的React應用程式中，可能有許多元件、函式和其他程式碼對於一個特定的頁面或功能是不必要的。樹狀搖動使你能夠刪除這些未使用的程式碼，減少包的大小，提高應用程式的效能。
Tree-shaking的工作原理是分析你的程式碼的依賴關係，並刪除任何不使用或不被引用的程式碼。這是由捆綁工具，如Webpack，在構建過程中完成的。當你匯入一個模組時，捆綁器將只包括在你的應用程式中實際使用的程式碼部分。
為了確保你的React應用程式可以利用樹形搖動的優勢，你應該使用ES6模組，並確保你的程式碼是模組化的，並遵循組織和匯入/匯出程式碼的最佳實踐。此外，當你只需要其中一小部分時，你應該避免匯入整個庫。
5. 優化你的影象
優化影象是提高任何應用程式效能的一個重要部分，包括React應用程式。大的和未經優化的影象會減慢你的網路應用，使它需要更長的時間來載入。下面是一些你可以用來優化你的影象的技巧：
- 壓縮你的影象：影象壓縮可以減少你的影象的大小，而不明顯影響質量。有幾個影象壓縮工具，如TinyPNG、JPEGmini和Kraken.io，它們可以在不損失質量的情況下壓縮你的影象。
- 使用適當的影象格式： 不同的影象格式更適合於不同型別的影象。例如，JPEG更適合照片，而PNG更適合有透明背景的影象。
- 調整你的影象大小： 大的影象會減慢你的網站。將你的影象調整到適當的大小，可以減少你的影象的大小，提高你的網路應用程式的效能。
- 懶載入你的影象： 懶載入影象意味著只有在需要的時候才載入影象，比如當它們出現在使用者的螢幕上。(我們在文章的第二部分討論了這個特殊的技術。)
- 使用響應式影象： 響應式影象可以適應使用者螢幕的大小，這可以提高你的網站在不同裝置上的效能。使用srcset和 sizes屬性，為每個裝置提供合適的影象尺寸。
小結
在這篇文章中，我們已經介紹了五種方法，可以用來提高React應用程式的效能，減少生產包的大小。這些可以為很多使用者提供很大的改善，特別是那些網路連線較慢或低端裝置沒有那麼強大的CPU。
評論留言