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

Question

我有一個相當大的應用程序，現在的捆綁包大小大約為2MB（大約有3個區塊）。為了提高載入時間，我決定開始使用相對較新的React Lazy。

這是一個懶得載入的範例：

const Wizard = React.lazy(() => import('./components/wizards/Wizard'));

我理解這個概念的一般思路，但我仍然很難理解除了偶爾需要等待一段時間來加載區塊之外，還有什麼缺點。

根據我所讀到的，我沒有理由使用常規導入。

我的問題是：我是否應該在我的應用程式中的每個元件導入上使用懶加載？為什麼？為什麼不？

我很想聽聽你們的想法。

Answer 1

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

Answer 2

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

例如，您正在建立一個新聞聚合應用程式。您的應用程式包括兩個頁面，例如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>
);