时间戳

首页 > 解决方案 > 为什么延迟加载不是 React 的默认设置？

reactjs - 为什么延迟加载不是 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 组件中。

标签： reactjslazy-loading

解决方案

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

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

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

推荐阅读