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

问题描述 投票：1回答：3

我只是在完成React课程，目前的话题是延迟加载。

我想知道为什么延迟加载不是默认的，并且在没有强迫开发人员编写重复代码的情况下由React处理？

示例：

在此过程中，我们希望延迟加载Posts组件，因为在此组件中，我们仅在特定路线上进行渲染。因此，他替换为

import Posts from './containers/posts'

with

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

他替换使用的地方

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

with

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

所以基本上只是将我们要延迟加载的组件包装到某个React组件中。

reactjs lazy-loading
3个回答
2
投票

React lazy：-现在已完全集成到核心反应库本身中。

[首先，捆绑涉及逐步调整我们的代码组件，并将它们放在传递给浏览器的一个JavaScript块中；但是随着我们应用程序的增长，我们注意到捆绑包的大小变得非常繁琐。这会很快使您的应用程序使用起来非常困难，特别是缓慢。使用Code splitting，可以将捆绑包拆分为较小的块，在这些块中，可以首先加载最重要的块，然后每隔一个懒惰地加载其他次要块。

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

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

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

1
投票

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

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

0
投票

React不是自行处理延迟加载，而是底层捆绑程序（Webpack）的relies on the functionality。特别是，捆绑程序将import()语句（即proposal for the dynamic import）转换为大多数浏览器都可以处理的内容。因此，要强制执行底层构建过程以延迟加载特定模块，还必须使用import()。

[一般来说，拆分成多个块（使用延迟加载时在构建时为what is happening）可能很好（例如，对于移动用户，如@Prashant Adhikari所述），但也会导致使用该页面时出现额外的延迟，因为文件必须首先通过网络传输。因此，到处都没有延迟加载也是一种选择。实际上，这个问题将来可能会消失（特别是在HTTP / 2中使用“智能” preload机制），但是对于大多数应用程序来说，最近几年的最佳实践似乎是为应用程序生成了一个胖JS文件。相关的脚本，再加上一个vendor.js作为依赖性。

但是，为了减少页面加载时间，引入延迟加载可能是合理的。 Esp。对于较大的应用程序（如Stack Overflow），预先加载描述主要内容所需的模块（例如Questions）并延迟加载频率较低的页面（例如User settings）是有意义的。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.