React 延迟加载 - 何时使用

Question

我有一个相当大的应用程序，它现在的捆绑包大小约为 2mb（3 个块左右）。为了缩短加载时间，我决定开始使用相对较新的 React Lazy。

这是一个延迟导入的例子：

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

我理解总体思路，但我仍然很难理解有什么缺点，除了不时需要等待一下来加载一个块。

根据我的阅读，我没有理由使用常规导入。

我的问题是：我应该只对应用程序中的每个组件导入使用惰性导入吗？为什么？为什么不呢？

我很想听听你们的想法。

Answer 1

不，对于每个组件都不需要。用于每个布局或页面是有意义的。一个好的起点是路线。网络上的大多数人习惯于需要花费一些时间来加载页面转换。您还倾向于一次重新呈现整个页面，因此您的用户不太可能同时与页面上的其他元素进行交互。

例如，您为新闻聚合器创建应用程序。您的应用程序包括两个页面，例如

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

Answer 2

我还没有开始使用它。但我认为最乐观的方法是对着陆页所需的所有组件进行定期导入。其他一切，例如除家以外的任何其他路线，都应使用延迟加载。这就是我猜的一般想法。

Answer 3

延迟加载是优化应用程序的基本技术。特别是在更大、更复杂的应用程序中，它可以帮助减少加载时间/下载数据，帮助 SEO，仅公开用户所需的代码和组件，例如，不为普通用户提供管理组件。巧妙地实施它可以帮助进行 A/B 测试或功能切换。

所以通常的答案是这取决于您的用例。对于小型新闻阅读器应用程序，您可能看不到任何好处。