React懒加载 - 何时使用

Question

我有一个相当大的应用程序，现在捆绑包的大小约为2MB组合（大约3个块）。为了改善加载时间，我决定开始使用相对较新的React Lazy。

这是一个懒加载的示例：

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

我理解大致意思，但仍然不太清楚除了偶尔需要等待一段时间来加载块之外还有哪些缺点。

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

我的问题是：我是否应该在我的应用程序中的每个组件导入上都使用惰性导入？为什么？为什么不？

我很想听听你们的想法。

- Sagi Rika

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

- an_parubets

Answer 2

我还没有开始使用它。但是我认为最乐观的方法是在需要在着陆页面上使用的所有组件上进行定期导入。除了主页之外的任何其他路由都应该使用延迟加载。我想这就是一般的想法。

- Singh

---

考虑相同的方式，对于“/”路由，使用普通的导入方式，而对于其他情况则使用延迟导入。 - Goran_Ilic_Ilke

Answer 3

懒加载是一种优化应用程序的重要技术。特别是在更大、更复杂的应用程序中，它可以帮助减少加载时间/下载数据，在 SEO 上提供帮助，仅向用户公开所需的代码和组件，例如对于常规用户没有管理员组件。巧妙实现可以帮助进行 A/B 测试或功能切换。

因此，通常的答案是它取决于您的使用情况。对于小型新闻阅读器应用程序，您可能看不到任何好处。

- Flobo79