Question

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

这是一个懒惰导入的示例：

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

我了解总体思路，但除了要不时地加载一些块之外，我仍然很难理解其缺点。

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

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

我很想听听你们的想法。

Answer 1

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

例如，您为新闻聚合器创建应用程序。您的应用程序包括两个页面，例如Result和NewsList。每页包含几个不同的组件。在此示例中，将惰性加载组件用于彼此的页面是有意义的。然后它将加载所需的组件。

该应用程序还具有NewsItemPage和Header。它们应该以通常的方式加载。由于它们用在每个页面上，因此异步加载毫无意义。

Footer

Answer 2

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