前端 20 年！正式"干掉" 骨架屏！
V
认真努力的小四子约 2 分钟
认真努力的小四子约 2 分钟在前端世界里，有一件事几乎每个人都干过——写骨架屏（Skeleton）。
常见做法无非两种：
用 Ant Design这类组件库拼一个或者自己 手写一套骨架组件
问题也很现实：
想做到“ 和真实 UI 完全一致”，代码会非常多一旦 UI改了，骨架屏很容易忘记同步布局复杂一点（卡片、列表、嵌套结构），基本就是体力活
🚀 Boneyard：拒绝手写骨架屏
最近有个项目开始在圈子里刷屏 —— Boneyard
它做了一件很“反常识”的事：
❌ 不再手写 Skeleton✅ 直接从真实页面“ 生成 Skeleton”
让骨架屏不再是 UI，而是“编译产物”
🧠 它到底是怎么做到的？
Boneyard 的核心思路大致就是：
在构建阶段，把真实 UI “拍扁”成骨架数据
核心工作流（非常关键）
整个流程其实很清晰：
正常写你的组件
你不需要写任何骨架 UI：
<Skeletonname="user-card">
<UserCard />
</Skeleton>
运行 CLI 生成骨架
npx boneyard-js build
这一步才是核心：
它会 启动浏览器（Playwright）扫描 DOM记录所有元素的位置和尺寸
最终生成一份数据文件：
.bones.json
本质就是：
UI → 坐标数据（x / y / width / height / radius）
运行时直接渲染
<Skeletonname="user-card" />
不再依赖真实组件，只渲染“骨架数据”
⚡ 如何快速上手？
大概只需要三步：
安装
npm install boneyard-js
包裹组件
<Skeletonname="card">
<Card />
</Skeleton>
生成骨架
npx boneyard-js build
完成之后就可以直接用了。
🌍 支持哪些框架？
这是 Boneyard 很有意思的一点：它本质是跨框架的
✅ 官方支持
ReactReact NativeSvelte 5
🧩 Vue 也能用（社区版本）
虽然官方还没有 Vue 版本：
但社区已经有人做了适配 - boneyard-vue
它本质上做了一件事： 用 Vue 实现 Skeleton 运行时
所以你可以这样写：
<Skeletonname="card":loading="loading">
<Card />
</Skeleton>
💥 写在最后
Boneyard 本质是在做一件事：把“骨架屏”从手工活，变成编译产物。
如果说过去 20 年：前端在“写 UI”，那 Boneyard 在做的是：
让 UI 的“加载态”也进入编译时代
当 Skeleton 都开始被编译：
那未来会不会是：
loading不再写animation不再写甚至 UI也不再“手写”
🔗 相关链接
Boneyard 官网： https://boneyard.vercel.app/overviewBoneyard Vue： https://github.com/samuelbelo/boneyard-vue