如何一步提升 React 应用程序加载时间
如何一步提升 React 应用程序加载时间
Google Docs 和 YouTube 使用类似的技术来节省超过 500KB 的资源加载。 这种简单的技术将快速改善您的 React 应用程序的加载时间。
有时我们的应用程序中有一些组件应该隐藏在页面上，除非需要。一个典型的例子是延迟加载不在视口中的图片。
？
这种简单的技术使我们能够缩短首次加载时间，因为我们不会立即请求所有照片。相同的方法可以应用于应用程序的其他部分。
该技术很简单：我们不会在应用程序中加载那些在加载应用程序时不一定重要的组件。应用程序将根据需要加载这些组件，例如：当它们在视口中或用户交互时。
由于资源是按需加载的，因此可以节省获取这些资源所需的加载时间。当您的应用程序需要加载多个繁重的组件时，它非常有效。
Google Docs 和 YouTube 使用类似的技术来节省超过 500KB 的资源加载。
这是一个简单的聊天应用程序，可按需加载繁重的表情符号选择器组件。
演示链接： https://chat-app-eight-ashen.vercel.app
上面的应用程序是这个用例的一个简单示例。当。。。的时候 表情选择器 在表情符号按钮单击时呈现， 反应懒惰 检测是否 表情选择器 组件应该在屏幕上可见。
然后它开始导入组件模块。该应用程序将在导入组件时显示加载。
该加载组件在该过程中是有益的。由于组件是按需导入的，因此我们需要为用户提供反馈。加载组件通知用户应用程序没有冻结：他们只需要等待组件加载。
在构建繁重的应用程序时，这些简单的技术被证明是救命稻草。明智地使用此技术，因为将其与每个组件一起使用会导致性能下降。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
