react预加载_您肯定应该在React中使用Suspense —代码拆分和预加载

react预加载

React挂起-简短回顾 (React Suspense — a short recap)

React Suspense is part of a new suite of features from React. It basically lets you suspend the rendering of a component until a certain condition is met.

React Suspense是React新功能的一部分。 它基本上使您可以暂停组件的呈现，直到满足特定条件为止。

React Suspense goes hand-in-hand with the scary sounding Concurrent Mode. In this article we are not going to talk about that one, as it is still in its infancy and not yet stable.

React Suspense与可怕的并发模式并驾齐驱。 在本文中，我们将不再讨论它，因为它仍处于起步阶段，尚未稳定。

However, you could start using React Suspense for one huge thing already: lazy loading components via code splitting 🎉.

但是，您可能已经开始将React Suspense用于一件大事： 通过代码拆分 la 延迟加载组件 。

代码拆分？ (Code splittin’?)

Chances are that you’ve bootstrapped your React application via create-react-app, Gatsby, Next.js or used a template. All of these include a bundler, like Webpack.

您可能已经通过create-react-app，Gatsby，Next.js或使用模板来引导React应用程序。 所有这些都包括捆绑器，例如Webpack。

Webpack basically takes your JavaScript files (your React components, for example) and bundles them (i.e. it creates a BIG file that contains all that’s needed). But is everything actually needed from the beginning?

Webpack基本上会获取您JavaScript文件(例如，您的React组件)并将其捆绑(即，它会创建一个包含所有所需文件的BIG文件)。 但是实际上从一开始就需要一切吗？

You might not need all of your React components’ code loaded from the start. Let’s say you have multiple routes (i.e. multiple pages), thus not all of them are visible at the same time, and only one is visible at the application’s initial load-time.

您可能不需要一开始就加载所有React组件的代码。 假设您有多个路由(即多个页面)，因此并非所有路由都同时可见，并且在应用程序的初始加载时只有一个可见。

In this case, you could just fetch the code for the other components later on, couldn’t you? Thus makin