如何一步提高React应用程序加载时间

　　谷歌文档和YouTube使用类似的技术来节省超过500KB的资源加载。这个简单的技术将快速改善 React 应用程序的加载时间。有时，除非需要，否则我们的应用程序中的某些组件应隐藏在页面上。一个典型的示例是延迟加载不在视口中的图片。

　　这将如何改善我的加载时间？

　　这种简单的技术使我们能够缩短首次加载时间，因为我们不会立即请求所有照片。相同的方法可以应用于应用程序的其他部分。

　　技术很简单：我们不会在应用程序中加载那些在加载应用程序时不一定重要的组件。应用程序将根据需要加载这些组件，例如：当它们在视口中或用户交互时。

　　由于资源是按需加载的，因此将节省获取这些资源所需的加载时间。在你的应用有多个繁重的组件要加载的情况下，它非常有效。

　　谷歌文档和YouTube使用类似的技术来节省超过500KB的资源加载。

　　一个简单的应用程序，可按需加载大量资源

　　这是一个简单的聊天应用程序，可按需加载繁重的表情符号选取器组件。

　　上面的应用程序是此用例的一个简单示例。当 呈现在表情符号按钮上时，单击，检测组件是否应在屏幕上可见。EmojiPickerreact lazyEmojiPicker

　　然后，它开始导入组件模块。在导入组件时，应用将显示加载。

　　该加载组件在此过程中是有益的。由于组件是按需导入的，因此我们需要为用户提供反馈。加载组件通知用户应用程序尚未冻结：他们只需要等待组件加载。

　　事实证明，这些简单的技术在构建繁重的应用程序时是救命稻草。明智地使用这种技术，因为将其与每个组件一起使用都可能导致性能下降。