为什么React的默认选项不是懒加载？

Question

我正在学习React，并且当前的主题是“懒加载”。

我在想为什么懒加载不是React的默认设置，并由React处理，而不需要开发人员编写重复的代码?

例如：

在课程中，我们希望懒惰地加载“Posts”组件，因为在该组件中，只有在特定路线上时才进行渲染。因此，他替换了原本的代码：

import Posts from './containers/posts'

使用

const Posts = React.lazy(() => import('./containers/posts'))

他在使用时替换掉了原内容

<Route path='/posts' component={Posts}>

使用

<Route
  path='/posts'
  render={() => (
    <Suspense>
      <Posts>
    </Suspense)}
>

基本上只需在某个React组件中包装我们想要lazyload的组件即可。

- Flip

---

懒加载什么？开发者应该严格遵循哪种模式？ - kidney

组件的惰性加载（通过路由？ - 这在课程的路由章节中）。在导入语句中，将组件包装在高阶组件中的模式。 - Flip

@kidney 我已经编辑了问题并提供了一个例子。 - Flip

Answer 1

React并不会自己处理懒加载，而是依赖于底层打包器（Webpack）的功能。特别是，打包器将import()语句（这是动态导入提案）转换为大多数浏览器可以处理的内容。因此，要强制底层构建过程懒加载特定模块，还必须使用import()。

一般来说，将内容分成多个块（这就是在使用延迟加载时构建时发生的情况）可能是有好处的（例如，如@Prashant Adhikari所提到的那样，对于移动用户），但同时也会导致页面使用时出现额外的延迟，因为文件必须一个接一个地通过网络传输。因此，无法在所有地方都进行延迟加载。实际上，这个问题在未来可能会消失（特别是在HTTP/2中使用一些“智能”预加载机制的情况下），但对于大多数应用程序而言，过去几年的最佳实践似乎是生成一个针对与应用程序相关的脚本的大型JS文件以及一个用于依赖项的vendor.js。

然而，引入延迟加载可能是合理的，以便最小化页面加载时间。特别是对于较大的应用程序（如Stack Overflow），预加载需要展示主要内容（例如Questions）的模块，并延迟加载不太常见的页面（例如User settings）是有意义的。

- dim

Answer 2

React lazy：现在已经完全整合到核心的 React 库中。

首先，打包涉及将我们的代码组件按顺序对齐并放入一个 JavaScript 块中，然后将其传递给浏览器；但随着应用程序的增长，我们注意到捆绑包的大小变得非常笨重。这可能会使使用您的应用程序变得非常困难，尤其是缓慢。通过代码拆分，可以将包拆分为较小的块，其中最重要的块可以首先加载，然后每个其他辅助块都可以延迟加载。

此外，在构建应用程序时，我们知道，作为最佳实践，应考虑使用移动互联网数据的用户以及使用非常慢的互联网连接的用户。我们开发人员始终应该能够在资源加载到 DOM 期间甚至在悬停期间控制用户体验。

使用惰性加载，您可以自定义并懒惰地加载当前屏幕不需要的组件。

关于原生是否具有lazy loading的问题，可能需要一些更有经验的人回答，或者您可以在 gitHub 上提出问题。

- Prashant Adhikari

Answer 3

这是React 16.6中发布的相对较新的功能。

如果有一种方法可以在不重写代码的情况下为所有现有项目启用懒加载，他们就会包含它。但事实上他们没有这样做，这意味着它与所有现有模式不兼容。

- ed'