为什么延迟加载不是 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 本身并不处理延迟加载，而是依赖于底层捆绑器（Webpack）的功能。特别是，捆绑器将import()语句（这是动态导入的建议）转换为大多数浏览器可以处理的内容。因此，要强制底层构建过程延迟加载特定模块，您还必须使用import().

一般来说，分成多个块（这就是使用延迟加载时在构建时发生的情况）可能会很好（例如，对于移动用户，正如 @Prashant Adhikari 提到的），但也会导致使用页面时的额外延迟，因为文件具有先通过网络一一传输。因此，也不能选择在任何地方都进行延迟加载。事实上，这个问题将来可能会消失（尤其是 HTTP/2 中的一些“智能”预加载机制），但对于大多数应用程序来说，过去几年的最佳实践似乎是为与应用程序相关的生成一个胖 JS 文件。脚本加上一个vendor.js表示依赖项。

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