何时应该使用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>
);