前世与今生

自从前端三大框架React、Vue、Angular出道以来，前端开发面向工程化，同时工程化给前端开发带来的极大的便利。一些脚手架也因运而生，如create-react-app、vue-cli等单页脚手架。总所周知，单页的首屏体验一直不怎么样，特别是在弱网的情况下白屏时间太长，那怎么解决呢？可能骨架屏方案是个不错的选择。

骨架屏解决了什么问题？

如果用户在等待Js、Css等资源加载的时间内显示网页大概的轮廓，等资源加载完毕后，在显示加载的真正内容，这样会可以大大降低用户的焦虑情绪，还可以让网页加载变得平滑，大大提升用户体验！

怎么实现骨架屏？

手写css、html代码，这种方式可以快速的输出需要的骨架屏代码，但是对于前端而言，可能并不是个最优的方案。前端的产品可能随着迭代的过程，UI肯定也随之快速迭代，那这种人工输出代码的方式，可能就有所欠缺了。
饿了么提供了一套骨架屏生成方案：通过 webpack 插件 page-skeleton-webpack-plugin自动生成骨架屏html，功能太强大了。但是我使用的时候，发现一个问题:就是在目前更新进度稍微慢了许多，在一些新项目可能已经不能跑了。这也是我开发这个工具的原因。

关于骨架屏可视化工具

实现原理

分析网页Dom树节点，通过Puppetter工具生成html、css代码。

一、安装 create-skeleton-quickly

npm i create-skeleton-quickly -g

二、使用方法

打开网页可视化工具

npm i create-skeleton-quickly -g
csq run 5000

通过配置文件生成骨架屏

csq init // 在当前文件夹创建skeleton.config.js
csq start // 开始生成骨架屏代码

通过扩展方法

const DrawPageStructure = require('create-skeleton-quickly');

new DrawPageStructure({
    isAnimation: true,
    background: '#ecf0f2',
    pages: [
        {
            url: 'https://www.baidu.com',
        },
    ],
})
    .start()
    .then(html => {
        console.log(html);
    });

代码和更详情说明请移步 Github

欢迎PR和Star!

前端可视化工具（自动生成骨架屏代码）