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

前世与今生

自从前端三大框架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-quicklynpm i create-skeleton-quickly -g复制代码

二、 使用方法打开网页可视化工具npm i create-skeleton-quickly -g

npm 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);

});复制代码