谷歌文檔和YouTube使用類似的技術(shù)來節(jié)省超過500KB的資源加載。這個簡單的技術(shù)將快速改善 React 應用程序的加載時間。有時，除非需要，否則我們的應用程序中的某些組件應隱藏在頁面上。一個典型的示例是延遲加載不在視口中的圖片。

　　這將如何改善我的加載時間？

　　這種簡單的技術(shù)使我們能夠縮短首次加載時間，因為我們不會立即請求所有照片。相同的方法可以應用于應用程序的其他部分。

　　技術(shù)很簡單：我們不會在應用程序中加載那些在加載應用程序時不一定重要的組件。應用程序?qū)⒏鶕?jù)需要加載這些組件，例如：當它們在視口中或用戶交互時。

　　由于資源是按需加載的，因此將節(jié)省獲取這些資源所需的加載時間。在你的應用有多個繁重的組件要加載的情況下，它非常有效。

　　谷歌文檔和YouTube使用類似的技術(shù)來節(jié)省超過500KB的資源加載。

　　一個簡單的應用程序，可按需加載大量資源

　　這是一個簡單的聊天應用程序，可按需加載繁重的表情符號選取器組件。

　　上面的應用程序是此用例的一個簡單示例。當 呈現(xiàn)在表情符號按鈕上時，單擊，檢測組件是否應在屏幕上可見。EmojiPickerreact lazyEmojiPicker

　　然后，它開始導入組件模塊。在導入組件時，應用將顯示加載。

　　該加載組件在此過程中是有益的。由于組件是按需導入的，因此我們需要為用戶提供反饋。加載組件通知用戶應用程序尚未凍結(jié)：他們只需要等待組件加載。

　　事實證明，這些簡單的技術(shù)在構(gòu)建繁重的應用程序時是救命稻草。明智地使用這種技術(shù)，因為將其與每個組件一起使用都可能導致性能下降。