mcpField
D
dynamic-import

dynamic-import

github.com/patternsdev开发2571.5k 次安装28 周前更新
代码仓库

关于 dynamic-import

这是一项介绍按需导入 React 组件的开发技能，面向优化页面初始加载的开发者，涵盖 React.lazy、Suspense、加载占位界面及 SSR 替代方案。

主要功能

  1. 01延迟导入 React 组件
  2. 02使用 React.lazy 和 Suspense
  3. 03加载时显示占位界面
  4. 04SSR 使用 loadable-components

适用场景

  1. 01避免交互组件进入初始包
  2. 02减少弹窗或选择器的初始加载量
  3. 03在需要时加载非关键模块

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/patternsdev/skills --skill dynamic-import

安装后在 Claude Code 中输入/dynamic-import确认已加载。

详细介绍

动态导入

在聊天应用中，我们有四个关键组件：UserInfo、ChatList、ChatInput 和 EmojiPicker。不过，在初始页面加载时，只有其中_三个_组件会立即使用：UserInfo、ChatList 和 ChatInput。EmojiPicker 不会直接显示；如果用户不点击 Emoji 来切换显示 EmojiPicker，它甚至可能根本不会渲染。这意味着我们不必要地将 EmojiPicker 模块添加到了初始打包文件中，可能因此增加了加载时间！

为了解决这个问题，我们可以_动态导入_ EmojiPicker 组件。我们不会静态导入它，而只在需要显示 EmojiPicker 时才导入。在 React 中动态导入组件的简单方法是使用 React Suspense。React.Suspense 组件接收需要动态加载的组件，这样 App 组件就可以通过暂停导入 EmojiPicker 模块，更快地渲染其内容！

适用场景

  • 当某些模块仅在用户交互或满足特定条件时才需要使用，请采用此方法
  • 如果想缩小初始打包文件的体积以加快页面加载速度，此方法会很有帮助
  • 当模态框、选择器或大型库等组件在初始渲染时并不需要时，请采用此方法

使用说明

  • 在 React 中使用 React.lazy 和 Suspense 动态导入组件
  • 在动态导入的模块加载期间，提供有意义的回退界面
  • 对于不支持 React Suspense 的 SSR 应用，可考虑使用 loadable-components
  • 仅动态导入对初始渲染并非必需的模块

详情

我们可以将 EmojiPicker 拆分到独立的打包文件中，缩小初始打包文件的体积，而不是不必要地将它添加到初始打包文件中！

较小的初始打包文件意味着更快的初始加载速度：用户不必长时间盯着空白的加载屏幕。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 完全加载，但我们确保了应用在等待组件加载期间仍能完成渲染并可供交互，从而改善了用户体验。

Loadable Components

服务器端渲染目前尚不支持 React Suspense。React Suspense 的一个不错的替代方案是 loadable-components 库，可用于 SSR 应用。

与 React Suspense 类似，我们可以将延迟导入的模块传递给 loadable，只有在请求 EmojiPicker 模块时才会导入该模块！在模块加载期间，我们可以渲染一个 fallback 组件。

虽然 loadable components 是 SSR 应用中替代 React Suspense 的绝佳方案，但它们也适用于 CSR 应用，可用于暂停模块导入。

来源

评论

支持 Markdown