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测试或功能切换。

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