我有一个非常大的应用程序，现在它的捆绑包大小约为 2mb（大约 3 个块）。为了缩短加载时间，我决定开始使用相对较新的React Lazy。
下面是一个延迟导入的例子：
const Wizard = React.lazy(() => import('./components/wizards/Wizard'));
我理解总体思路，但我仍然很难理解有什么缺点，除了时不时需要等待一下才能加载一个块。
根据我阅读的内容，我没有理由使用常规导入。
我的问题是：我应该在我的应用程序中的每个组件导入上都使用延迟导入吗？为什么？为什么不？
我很想听听你们的想法。
不，对于每个组件都不需要。用于每个布局或页面是有意义的。一个好的起点是路线。网络上的大多数人都习惯于花费一些时间来加载页面转换。您还倾向于一次重新渲染整个页面，因此您的用户不太可能同时与页面上的其他元素进行交互。
例如，您为新闻聚合器创建应用程序。您的应用程序包括两个页面，例如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>
);
我还没有开始使用它。但我认为最乐观的方法是对登录页面上所需的所有组件进行常规导入。其他所有路线（例如除 home 之外的任何其他路线）都应使用延迟加载。这就是我猜的总体思路。