性能优化篇(三) : 动态导入

此系列文章:

假设我们有一个聊天应用，有四个关键组件： <UserInfo> 、 <ChatList> 、 <ChatInput> 和 <EmojiPicker> 。但是，在初始页面加载时仅需使用其中三个组件： <UserInfo> 、 <ChatList> 和 <ChatInput> 。 <EmojiPicker> 并不是直接可见的，如果用户不与之交互的话。

我们可以动态导入 <EmojiPicker> 组件。我们不使用静态导入，而是仅在想要显示 <EmojiPicker> 时导入它。在 React 中动态导入组件的一种简单方法是使用 React Suspense。 React.Suspense 组件接收动态加载的组件，这使得 <App>根组件可以通过暂停 <EmojiPicker> 的导入来更快地渲染其内容模块。

当用户单击表情符号时， <EmojiPicker> 组件将首次进行渲染。 <EmojiPicker> 组件呈现一个 <Suspense> 组件，该组件接收延迟导入的模块：(在本例中为 <EmojiPicker>)。 Suspense 组件接受 fallback 属性，该属性可以传递一个在加载期间需要显示的组件(如加载进度svg等)。

较小的初始包大小意味着更快的初始加载性能：用户不必长时间盯着空白加载屏幕。 fallback 组件让用户知道我们的应用程序还在响应：他们只需要等待一段时间处理和执行。

Asset                             Size         Chunks            Chunk Names
emoji-picker.bundle.js           1.48 KiB      1    [emitted]    emoji-picker
main.bundle.js                   1.33 MiB      main [emitted]    main
vendors~emoji-picker.bundle.js   171 KiB       2    [emitted]    vendors~emoji-picker

之前的初始包是 1.5MiB ，我们通过延缓 <EmojiPicker> 组件的导入将其减少到 1.33 MiB ！

通过动态导入 <EmojiPicker> 组件，我们成功地将初始包大小从 1.5MiB 减小到 1.33 MiB。尽管用户可能仍需要等待一段时间才能完全加载 <EmojiPicker> 。

目录