218
// 项目简介
Boneyard 是一款能够从真实 DOM 中提取布局信息，从而自动生成像素级精确骨架屏的开发工具。开发者只需通过简单的组件包裹和命令行构建，即可实现无需手动调整的加载占位效果。该工具支持 React、React Native 和 Svelte 等多种框架，并提供灵活的布局 API 以满足不同响应式需求。
// 技术分析
Boneyard 采用了一种自动化生成骨架屏的设计理念，通过直接从真实 DOM 中提取布局信息来消除手动测量和调整占位符的繁琐工作。该项目解决了传统骨架屏开发中难以保持与 UI 布局高度一致性的痛点，通过 CLI 工具自动捕获元素位置并生成精确的骨架数据。其技术决策上强调了响应式支持和性能优化，通过提供编译后的布局 API，允许开发者在 SSR 或高频重绘场景中高效复用骨架描述符，实现了开发效率与运行性能的平衡。
// 核心亮点
01
通过自动化扫描真实 DOM 结构，生成与实际 UI 像素级对齐的骨架屏，无需手动编写占位符。
02
内置响应式支持，能够自动在多个预设断点（如 375px、768px、1280px）捕获布局信息。
03
提供框架无关的骨架注册机制，支持 React、Svelte 以及 React Native 等多种开发环境。
04
具备智能的布局引擎，通过 compileDescriptor API 优化重复渲染性能，适合 SSR 和复杂动画场景。
05
支持自定义骨架颜色及脉冲动画效果，增强加载过程中的视觉体验。
06
CLI 工具支持灵活配置，允许开发者指定 URL 或自定义断点来生成骨架数据。
// 典型使用场景
01
通过命令行自动扫描并生成与真实组件布局完全匹配的骨架屏
02
支持多断点响应式骨架屏，确保在不同屏幕尺寸下显示一致
03
提供高性能的布局编译 API，适用于 SSR 及高频重绘场景
// 快速开始
首先通过 npm install boneyard-js 安装依赖，并在组件中包裹 <Skeleton> 标签并指定唯一名称。接着运行 npx boneyard-js build 命令自动扫描 DOM 并生成骨架数据。最后在应用入口处导入生成的 registry 文件，即可实现自动化的骨架屏加载效果。