.jpg)
react lazy加載組件通過(guò)react.lazy和suspense實(shí)現(xiàn)，可提升初始加載速度。使用react.lazy動(dòng)態(tài)引入組件，結(jié)合suspense顯示加載狀態(tài)；判斷是否成功可通過(guò)瀏覽器開發(fā)者工具觀察network請(qǐng)求，若組件JS文件在首次渲染時(shí)才加載則生效；失敗處理需配合Error boundaries捕獲錯(cuò)誤并展示備用內(nèi)容；最佳實(shí)踐包括合理選擇懶加載組件、優(yōu)化fallback內(nèi)容、權(quán)衡用戶體驗(yàn)、結(jié)合代碼分割工具及注意ssr兼容性；react.lazy必須與suspense配合使用，否則會(huì)報(bào)錯(cuò)；SEO問(wèn)題可通過(guò)服務(wù)端渲染、預(yù)渲染或noscript標(biāo)簽緩解；suspense的fallback可為復(fù)雜組件但建議保持簡(jiǎn)單；測(cè)試時(shí)可用jest模擬加載狀態(tài)驗(yàn)證組件行為。
React Lazy加載組件主要通過(guò)React.lazy和Suspense實(shí)現(xiàn)，它允許你將組件的代碼分割成更小的 chunks，只有在需要渲染時(shí)才加載，從而提升應(yīng)用的初始加載速度。
React.lazy 允許你像渲染常規(guī)組件一樣渲染動(dòng)態(tài)引入（import()）的組件。Suspense 是一個(gè) React 組件，用于在組件加載時(shí)顯示 fallback 內(nèi)容，比如加載指示器。
import React, { Suspense } from 'react'; const MyComponent = React.lazy(() => import('./MyComponent')); function MyAppComponent() { return ( <Suspense fallback={<div>Loading...</div>}> <MyComponent /> </Suspense> ); } export default MyAppComponent;
如何判斷組件是否成功使用了 Lazy 加載？
打開瀏覽器的開發(fā)者工具，在 Network 標(biāo)簽頁(yè)中，觀察組件對(duì)應(yīng)的 JavaScript 文件是否在組件首次渲染時(shí)才被加載。如果該文件在初始加載時(shí)沒(méi)有出現(xiàn)，而在組件被渲染時(shí)才加載，那么 Lazy 加載就生效了。
Lazy 加載失敗了怎么辦？
Lazy 加載失敗可能是由于網(wǎng)絡(luò)問(wèn)題、模塊加載錯(cuò)誤或其他原因?qū)е碌摹Ｊ褂?Error Boundaries 可以優(yōu)雅地處理加載失敗的情況。
import React, { Suspense, useState } from 'react'; const MyComponent = React.lazy(() => import('./MyComponent')); function ErrorBoundary({ children, fallback }) { const [hasError, setHasError] = useState(false); static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error("Caught an error in ErrorBoundary: ", error, errorInfo); } if (hasError) { return fallback; } return children; } function MyAppComponent() { return ( <ErrorBoundary fallback={<div>Failed to load component!</div>}> <Suspense fallback={<div>Loading...</div>}> <MyComponent /> </Suspense> </ErrorBoundary> ); } export default MyAppComponent;
使用 Lazy 加載組件的最佳實(shí)踐有哪些？
- 合理選擇需要 Lazy 加載的組件： 不是所有組件都需要 Lazy 加載。通常，首屏不需要立即渲染的、體積較大的組件適合 Lazy 加載。比如，頁(yè)面底部的評(píng)論組件、彈窗組件等。
- 優(yōu)化 Suspense 的 fallback 內(nèi)容： Suspense 的 fallback 應(yīng)該足夠友好，讓用戶知道正在加載內(nèi)容，避免長(zhǎng)時(shí)間的空白屏幕。可以使用簡(jiǎn)單的加載指示器，或者展示一些占位內(nèi)容。
- 考慮用戶體驗(yàn)： Lazy 加載雖然可以提升初始加載速度，但也可能導(dǎo)致組件首次渲染時(shí)出現(xiàn)延遲。需要權(quán)衡加載速度和用戶體驗(yàn)，避免過(guò)度使用 Lazy 加載，導(dǎo)致用戶頻繁看到加載指示器。
- 結(jié)合代碼分割工具： webpack、Parcel 等構(gòu)建工具都支持代碼分割，可以將應(yīng)用的代碼分割成更小的 chunks。結(jié)合 Lazy 加載，可以更好地控制組件的加載時(shí)機(jī)，提升應(yīng)用的性能。
- 服務(wù)端渲染（SSR）下的 Lazy 加載： 在服務(wù)端渲染的應(yīng)用中，Lazy 加載的處理方式有所不同。需要確保服務(wù)端渲染時(shí)也能正確處理動(dòng)態(tài)引入的組件，避免出現(xiàn)錯(cuò)誤。通常，可以使用 loadable-components 等庫(kù)來(lái)處理 SSR 下的 Lazy 加載。
React.lazy 一定要配合 Suspense 使用嗎？
是的，React.lazy 必須和 Suspense 組件一起使用。React.lazy 用于定義一個(gè)需要懶加載的組件，而 Suspense 用于在組件加載過(guò)程中顯示一個(gè)備用內(nèi)容（fallback）。如果沒(méi)有 Suspense，當(dāng)懶加載的組件尚未加載完成時(shí)，React 將無(wú)法處理這種情況，會(huì)導(dǎo)致錯(cuò)誤。
如何處理 Lazy 加載中的 SEO 問(wèn)題？
對(duì)于需要 SEO 優(yōu)化的頁(yè)面，Lazy 加載可能會(huì)影響搜索引擎的抓取。因?yàn)樗阉饕婵赡軣o(wú)法等待懶加載的組件加載完成，導(dǎo)致頁(yè)面內(nèi)容不完整。
- 服務(wù)端渲染（SSR）： 使用服務(wù)端渲染可以將完整的頁(yè)面內(nèi)容傳遞給搜索引擎，避免 Lazy 加載帶來(lái)的問(wèn)題。
- 預(yù)渲染： 使用預(yù)渲染工具，在構(gòu)建時(shí)將頁(yè)面渲染成靜態(tài) html 文件，然后提供給搜索引擎。
- 使用 對(duì)于搜索引擎無(wú)法執(zhí)行 JavaScript 的情況，可以使用
Suspense 的 fallback 可以是一個(gè)復(fù)雜的組件嗎？
可以，Suspense 的 fallback 屬性可以接受任何 React 組件，包括復(fù)雜的組件。這允許你創(chuàng)建自定義的加載指示器，或者展示更豐富的占位內(nèi)容。但是，建議 fallback 組件盡量簡(jiǎn)單，避免引入額外的依賴，影響加載速度。
如何測(cè)試使用了 Lazy 加載的組件？
測(cè)試 Lazy 加載的組件需要模擬組件加載過(guò)程中的狀態(tài)。可以使用 React.Suspense 的 fallback 屬性來(lái)驗(yàn)證加載指示器是否正確顯示。也可以使用 Jest 的 mock 功能來(lái)模擬組件的加載成功和失敗狀態(tài)，驗(yàn)證組件在不同情況下的行為。
.png)
