Wann sollten Sie die Lazy-Loading-Funktion von React verwenden?

Question

Ich habe eine ziemlich große Anwendung und die Bundle-Größe beträgt jetzt etwa 2 MB (ungefähr 3 Blöcke). Um die Ladezeiten zu verbessern, habe ich beschlossen, das relativ neue React Lazy zu verwenden.

Dies ist ein Beispiel für Lazy Loading:

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

Ich verstehe die allgemeine Idee des Konzepts, aber es fällt mir immer noch schwer zu verstehen, was der Nachteil ist, abgesehen davon, dass ich gelegentlich eine Weile warten muss, bis Chunks geladen sind.

Basierend auf dem, was ich gelesen habe, habe ich keinen Grund, reguläre Importe zu verwenden.

Meine Frage ist: Sollte ich bei jedem Komponentenimport in meiner Anwendung Lazy Loading verwenden? Warum? Warum nicht?

Ich würde gerne Ihre Meinung hören.

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