10年了，前端"骨架屏"终于变天，不需要写CSS了！
标签: 前端开发 / 骨架屏 / React / 开源工具
原文: 微信公众号「前端之神」https://mp.weixin.qq.com/s/cYeV3evx-wQ2JWG2MZiX5g
核心亮点
Boneyard-js = 全自动骨架屏生成工具。不用手写 CSS、不用算尺寸、不用适配响应式，直接从你真实组件生成骨架，UI 变了骨架自动跟着变。
骨架屏的痛点
前端开发做骨架屏（Skeleton Screen），向来是个苦活：
| 传统做法 | 问题 |
|---|---|
| 手写 CSS | 每个组件写一套，费时费力 |
| 算尺寸 | 布局一变，骨架全部重算 |
| 适配响应式 | 不同屏幕还要各写一套 |
| 维护困难 | UI 改了，骨架忘了改，直接穿帮 |
10 年了，这个问题一直没有好的解法。
直到 Boneyard-js 出现。
Boneyard-js 是什么？
一句话：从真实组件自动生成骨架屏，UI 变了骨架自动跟着变。
| 特性 | 说明 |
|---|---|
| 零 CSS | 不用手写任何骨架屏样式 |
| 零尺寸计算 | 自动从组件 DOM 结构生成 |
| 零响应式适配 | 骨架跟随组件布局自动响应 |
| 自动同步 | UI 改了，重新跑一遍命令即可 |
安装（一行搞定）
npm install boneyard-js
# 或
yarn add boneyard-js
pnpm add boneyard-js
3 步直接用（复制粘贴即可）
第 1 步：包裹组件（最基础用法）
// app/blog/page.tsx
'use client' // Next.js App Router 必须加
import { Skeleton } from 'boneyard-js/react'
function BlogPage() {
const { data, isLoading } = useFetch('/api/post')
return (
// 👇 给 name，控制 loading 状态
<Skeleton name="blog-card" loading={isLoading}>
{data && <BlogCard data={data} />}
</Skeleton>
)
}
重点：
name必须填：CLI 靠它识别并生成骨架loading：控制骨架屏显示/隐藏
第 2 步：带接口请求的组件（必看 fixture）
如果组件需要后端数据才能渲染，用 fixture 给假数据，生成骨架时用 mock 内容，不影响生产环境。
<Skeleton
name="blog-card"
loading={isLoading}
// 👇 生成骨架用的 mock 内容，只在构建时生效
fixture={
<BlogCard
data={{
title: "Sample Post",
excerpt: "Placeholder text for layout...",
author: "Jane Doe"
}}
/>
}
>
{data && <BlogCard data={data} />}
</Skeleton>
fixture 的作用：让 Boneyard 在构建时知道组件的"长相"，从而生成准确的骨架屏。只作用于构建阶段，运行时完全不会影响。
第 3 步：生成骨架文件（最后一步）
先启动你的开发服务器，再执行：
npx boneyard-js build
自动完成：
- 扫描所有带
name的Skeleton组件 - 生成
.bones.json骨架配置文件 - 运行即生效，无需额外配置
工作原理
你的组件代码
↓（扫描 name 属性）
Boneyard CLI 分析组件 DOM 结构
↓（根据 fixture 或真实渲染）
生成 .bones.json 骨架配置
↓（运行时读取）
自动渲染骨架屏（无需手写 CSS）
核心优势：骨架屏直接从真实组件生成，而不是手写模拟。UI 改了，只需重新跑 npx boneyard-js build，骨架自动同步。
适用场景
| 场景 | 是否适合 |
|---|---|
| React + Next.js | ✅ 完美支持（App Router / Pages Router 均可） |
| 组件库开发 | ✅ 每个组件自动生成骨架 |
| 后台管理系统 | ✅ 列表/表格骨架一键生成 |
| 移动端 H5 | ✅ 响应式自动适配 |
| Vue/Svelte | ⏳ 目前只支持 React（Vue 版本计划中） |
与其他方案对比
| 方案 | 需要写 CSS | 自动同步 | 响应式适配 | 维护成本 |
|---|---|---|---|---|
| 手写 CSS 骨架 | ✅ 是 | ❌ 否 | 手动适配 | 高 |
| Ant Design Skeleton | ❌ 否 | ❌ 否 | 内置支持 | 中 |
| React Content Loader | ❌ 否 | ❌ 否 | 手动适配 | 中 |
| Boneyard-js | ❌ 否 | ✅ 是 | 自动适配 | 低 |
官方文档
完整 API、高级用法、常见问题：
👉 https://boneyard.vercel.app/overview
快速上手检查清单
-
npm install boneyard-js - 用
<Skeleton name="xxx" loading={...}>包裹组件 - 需要 mock 数据的组件加
fixture属性 - 启动 dev server（
npm run dev） - 执行
npx boneyard-js build - 检查生成的
.bones.json文件 - 测试 loading 状态下的骨架屏效果
写在最后
骨架屏这个东西，说重要也不重要，但用户体验上真的很关键。
以前要花半天调 CSS 的骨架屏，现在一条命令搞定，UI 改了重新跑一遍就好。
10 年了，前端的骨架屏终于迎来了一位真正的"自动化"选手。
如果你也在被骨架屏折磨，不妨试试：
npm install boneyard-js
npx boneyard-js build
本文整理自微信公众号「前端之神」，原文链接：https://mp.weixin.qq.com/s/cYeV3evx-wQ2JWG2MZiX5g