为什么延迟加载不是 React 的默认设置？

Question

我正在学习 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 组件中。

Answer 1

这是去年 React 16.6 发布的一个相对较新的功能。

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

Answer 2

React lazy : - 它现在完全集成到核心反应库本身。

首先，捆绑涉及按顺序对齐我们的代码组件并将它们放入一个 javascript 块中，然后传递给浏览器；但是随着我们的应用程序的增长，我们注意到 bundle 的大小变得非常笨重。这会很快使您的应用程序的使用变得非常困难，而且速度特别慢。使用代码拆分，可以将包拆分成更小的块，其中最重要的块可以首先加载，然后延迟加载所有其他次要块。

此外，在构建应用程序时，我们知道作为最佳实践，应该考虑使用移动互联网数据的用户和其他互联网连接速度非常慢的用户。我们开发人员应该始终能够控制用户体验，即使在资源加载到 DOM.

的暂停期间也是如此。

通过延迟加载，您可以自定义和延迟加载当前屏幕不需要的组件。

有关 lazy loading 的问题可能会由更有经验的人回答，或者您可以在 gitHub 上提出问题。

Answer 3

React 不会自行处理延迟加载，而是 relies on the functionality of the underlying bundler (Webpack). In particular, the bundler converts the import() statements (which is the proposal for the dynamic import) 处理大多数浏览器可以处理的内容。因此，要强制底层构建过程延迟加载特定模块，您还必须使用 import().

一般来说，拆分成多个块（这是 HTTP/2 中的 what is happening on build when lazy loading is used) might be good (e.g. for mobile users, as mentioned by @Prashant Adhikari) but also leads to additional delays while using the page because the files have to be transferred over the network one by one first. Thus, it's also not an option to have lazy loading everywhere. In fact, this issue might disappear in the future (esp. with some "intelligent" preload 机制）但对于大多数应用程序来说，过去几年的最佳实践似乎是为应用程序生成一个胖 JS 文件-related scripts plus a vendor.js for the dependencies.

但是，为了最大限度地减少页面加载时间，引入延迟加载可能是合理的。特别是对于更大的应用程序（如 Stack Overflow），预加载描绘主要内容所需的模块（例如 Questions）并延迟加载频率较低的页面（例如 User设置).

为什么延迟加载不是 React 的默认设置？

Why is lazy loading not the default for React?

lazy-loading

reactjs