首頁  >  問答  >  主體

何時應該使用React的懶加載功能?

<p>我有一個相當大的應用程序,現在的捆綁包大小大約為2MB(大約有3個區塊)。為了提高載入時間,我決定開始使用相對較新的React Lazy。 </p> <p>這是一個懶得載入的範例:</p> <pre class="brush:php;toolbar:false;">const Wizard = React.lazy(() => import('./components/wizards/Wizard'));</pre> <p>我理解這個概念的一般思路,但我仍然很難理解除了偶爾需要等待一段時間來加載區塊之外,還有什麼缺點。 </p> <p>根據我所讀到的,我沒有理由使用常規導入。 </p> <p><strong>我的問題是:我是否應該在我的應用程式中的每個元件導入上使用懶加載?為什麼?為什麼不? </strong></p> <p>我很想聽聽你們的想法。 </p>
P粉976737101P粉976737101443 天前484

全部回覆(2)我來回復

  • P粉790819727

    P粉7908197272023-08-25 19:12:59

    我還沒有開始使用它。但我認為最樂觀的方法是對所有在首頁上需要的元件進行定期導入。其他任何不是主頁的路由都應該使用懶加載。這是我想的一般思路。

    回覆
    0
  • P粉481035232

    P粉4810352322023-08-25 14:42:07

    不,對於每個元件都不需要。它在每個佈局或頁面中使用才有意義。一個好的起點是路由。大多數人在網頁上習慣於頁面轉換需要一定的載入時間。您也傾向於一次重新渲染整個頁面,所以您的用戶不太可能與頁面上的其他元素同時進行互動。

    例如,您正在建立一個新聞聚合應用程式。您的應用程式包括兩個頁面,例如NewsListNewsItemPage。每個頁麵包含幾個不同的元件。在這個例子中,對於每個其他頁面使用惰性載入元件是有意義的。然後它將加載它所需的組件。

    應用程式還有一個HeaderFooter。它們應該以常規方式加載。因為它們在每個頁面上都使用,並且非同步載入沒有意義。

    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>
    );

    回覆
    0
  • 取消回覆