mcpField
I
import-on-visibility

import-on-visibility

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

关于 import-on-visibility

import-on-visibility 是一项前端加载模式指南，介绍如何等组件进入视口后再导入模块。它面向希望减少初始加载内容的开发者，并说明适用场景、限制和加载占位方案。

主要功能

  1. 01组件进入视口时再导入
  2. 02使用 IntersectionObserver
  3. 03可选用可见性加载库
  4. 04显示模块加载占位内容
  5. 05说明不适用的场景

适用场景

  1. 01延迟加载首屏以下组件
  2. 02滚动时加载图片或小部件
  3. 03减少初始页面加载内容

安装

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

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

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

详细介绍

可见时导入

除了用户交互，我们通常还有一些组件在初始页面上不可见。一个很好的例子是延迟加载不在视口中直接可见的图像，只有用户向下滚动后才加载。

由于我们不会立即请求所有图像，因此可以缩短初始加载时间。组件也可以采用同样的方式！为了判断组件当前是否位于视口中，我们可以使用 IntersectionObserver API，也可以使用 react-lazyload 或 react-loadable-visibility 等库，快速为应用添加可见时导入功能。

适用场景

  • 用于初始页面上不可见的组件（例如首屏以下的内容）
  • 用户滚动时，适合延迟加载图像、小部件或大型组件

不适用场景

  • 对于必须立即渲染的首屏内容——延迟渲染会导致明显的布局偏移，并拖慢 LCP
  • 当组件足够轻量，以至于延迟加载带来的开销超过其节省的资源时
  • 当内容对 SEO 至关重要，且必须包含在初始 HTML 中时

说明

  • 使用 IntersectionObserver API 检测组件何时进入视口
  • 使用 react-lazyload 或 react-loadable-visibility 等库快速实现
  • 在模块加载期间提供一个加载备用组件

详情

每当组件渲染到屏幕上时，react-loadable-visibility 都会检测该元素是否应该显示在屏幕上。只有此时，它才会开始导入模块，同时用户会看到加载组件。

这个备用组件可以让用户知道应用并未卡住：只需稍等片刻，等待模块加载、解析、编译并执行即可！

来源

评论

支持 Markdown