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

Question

我只是在学习 React 类(class)，当前的主题是延迟加载。

我想知道为什么延迟加载不是默认的，而是由 React 处理而不强制开发人员编写重复的代码？

例子:

在类(class)中，我们希望延迟加载 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 不是自己处理延迟加载，而是 relies on the functionality底层捆绑器(Webpack)。特别是，捆绑器将 import()语句(即 proposal for the dynamic import )可以被大多数浏览器处理。因此，要强制底层构建过程以延迟加载特定模块，您还必须使用 import() .

一般来说，分割成多个 block (即 what is happening 在使用延迟加载时构建时)可能是好的(例如，对于移动用户，正如@Prashant Adhikari 所提到的)但也会导致在使用页面时出现额外的延迟，因为文件有先通过网络一一传输。因此，到处都有延迟加载也不是一种选择。事实上，这个问题将来可能会消失(尤其是 HTTP/2 中的一些“智能”preload 机制)，但对于大多数应用程序来说，过去几年的最佳实践似乎是为应用程序生成一个胖 JS 文件相关的脚本加上 vendor.js对于依赖项。

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