我只是在完成一个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组件中。
React不会自行处理延迟加载，而是依靠底层捆绑程序（Webpack）的功能。特别是，捆绑程序将import()语句（这是动态import的建议）转换为大多数浏览器都可以处理的内容。因此，要强制执行底层构建过程以延迟加载特定模块，还必须使用import()。
通常，将其拆分为多个块（使用延迟加载时在构建时会发生这种情况）可能会很好（例如，对于移动用户，如@Prashant Adhikari所述），但由于文件具有首先通过网络进行传输。因此，也不是到处都有延迟加载的选项。实际上，此问题将来可能会消失（特别是在HTTP / 2中使用一些“智能”预加载机制），但是对于大多数应用程序来说，最近几年的最佳实践似乎是为与应用程序相关的应用程序生成一个胖JS文件。脚本以及vendor.js依赖项。
但是，为了最小化页面加载时间，引入延迟加载可能是合理的。Esp。对于较大的应用程序（例如Stack Overflow），预先加载描述主要内容所需的模块（例如Questions）并延迟加载频率较低的页面（例如User settings）是有意义的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句