P粉7908197272023-08-25 19:12:59
我還沒有開始使用它。但我認為最樂觀的方法是對所有在首頁上需要的元件進行定期導入。其他任何不是主頁的路由都應該使用懶加載。這是我想的一般思路。
P粉4810352322023-08-25 14:42:07
不,對於每個元件都不需要。它在每個佈局或頁面中使用才有意義。一個好的起點是路由。大多數人在網頁上習慣於頁面轉換需要一定的載入時間。您也傾向於一次重新渲染整個頁面,所以您的用戶不太可能與頁面上的其他元素同時進行互動。
例如,您正在建立一個新聞聚合應用程式。您的應用程式包括兩個頁面,例如NewsList
和NewsItemPage
。每個頁麵包含幾個不同的元件。在這個例子中,對於每個其他頁面使用惰性載入元件是有意義的。然後它將加載它所需的組件。
應用程式還有一個Header
和Footer
。它們應該以常規方式加載。因為它們在每個頁面上都使用,並且非同步載入沒有意義。
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense, lazy } from 'react'; import Header from './components/Header'; import Footer from './components/Footer'; const NewsList = lazy(() => import('./pages/NewsList')); const NewsItemPage = lazy(() => import('./pages/NewsItemPage')); const App = () => ( <Router> <Header /> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={NewsList}/> <Route path="/news/:id" component={NewsItemPage}/> </Switch> </Suspense> <Footer /> </Router> );