vue-cli项目首页加载缓慢想要使用骨架屏效果，经过几天的踩坑，这里学习并记录一下vue项目自动生成骨架屏方法。
添加骨架屏，其优势在于：
- 写于HTML文件中，独立于Vue框架，节省了JS加载时间+JS全局环境创建的执行时间的时间
- 只在主页面根据页面结构独立编写，预先展示页面结构，进行视觉暂留，提供更好的交互感官
- 只在页面结构变化时进行修改，维护成本相对较低
骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。
那么重点就是怎么添加骨架屏 了，
大概方案有：
- 手动编写骨架屏代码
- 通过预渲染手动书写的代码生成相应的骨架屏
比如：vue-skeleton-webpack-plugin - 饿了么内部的生成骨架页面的工具
page-skeleton-webpack-plugin - JavaScript操作DOM 的方式结合 Puppeteer 自动生成网页骨架屏
- 其他...
上述方案分析：
1、手动编写骨架屏代码
该方法就是手动编写项目index.html 入口文件，实现在vue项目初始化展示替换div#app根元素前的骨架屏效果。
2、通过预渲染手动书写的代码生成相应的骨架屏 vue-skeleton-webpack-plugin
该方法需要下载使用vue-skeleton-webpack-plugin，主要原理是利用vue-server-renderer 将 .vue格式的骨架屏文件处理成html和css字符串的功能，进而完成骨架屏的注入；但是需要手动编写预渲染的骨架屏效果图代码；
亲测，注意以下出错场景：
- 【webpack --config ./webpack.skeleton.conf.js】报错可以尝试将webpack版本从4.0降到3.0；
- vue-loader@15.*之后 必须配置带有VueLoaderPlugin 之外，还需另外单独配置css-loader。（如果你不想手动设置 webpack，我们推荐使用Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。）
- 错误未安装webpck-cli，使用命令全局安装【npm install -g webpack-cli】即可；
- 项目报错可能是需要安装 css-loader style-loader
- 如果提示在webpack.config中未配置mode环境选项，配置即可
- 为保持构建环境一致，请采用`npm run dev`脚本编译的形式，以确保使用的webpack命令，vue-loader是本地版本。
详细使用参考网址：https://segmentfault.com/a/1190000014832185
使用步骤归纳：
1、安装vue-skeleton-webpack-plugin插件
2、在/src目录下新建一个Skeleton.vue文件，即已编写好的预渲染页面；
3、文件同级目录再新建一个skeleton.entry.js入口文件，其中引用了Skeleton.vue文件；
4、在项目根目录新建一个webpack.skeleton.conf.js配置文件，以专门用来进行骨架屏的构建。该文件中包含skeleton.entry.js入口文件，引用VueSSRServerPlugin插件，指定了其输出的json文件名；
5、使用【webpack --config ./webpack.skeleton.conf.js】命令在/dist目录下生成一个skeleton.json文件；
6、再在根目录下新建一个skeleton.js，该文件用于读取skeleton.json往index.html内插入骨架屏内容。
7、入口index.html文件，需要在被写入内容的位置添加<!--vue-ssr-outlet-->占位符，本例子在div#app里写入；
8、运行node skeleton.js，就可以完成骨架屏的注入了
前两个方法的局限性是都需要开发者自己编写骨架屏代码，并没有自动根据vue页面内容转换成相应色块组成的dom片段再注入入口html文件！！！所以使用该种方法开发效率低，麻烦，不能完全解决根据vue项目页面自动生成骨架屏dom，并注入入口html替代#app节点的问题
3、饿了么内部的生成骨架页面的工具 page-skeleton-webpack-plugin
饿了么的做的比较强大了，还有 UI 界面专门调整骨架屏
- 对于复杂的页面也会有不尽如人意的地方
- 生成的骨架屏节点是基于页面本身的结构和 CSS，存在嵌套比较深的情况，体积不会太小
- 只支持 history 模式.
这个不多说，没有亲测；饿了吗骨架屏方案思路https://github.com/Jocs/jocs.github.io/issues/22
4、JavaScript操作DOM 的方式结合 Puppeteer 自动生成网页骨架屏
该方法需要下载【npm i draw-page-structure -g】 ，用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏，原理是：
- 生成操作Dom的JavaScript脚本（该脚本用于将项目页面转换成色块形式的骨架屏效果）；
- 通过Puppeteer控制谷歌浏览器运行项目页面并获取页面、将上一步的脚本注入该页面，并生成骨架屏所需的Dom节点；
- 将自动生成的骨架屏Dom片段插入到应用页面的根入口节点。
使用注意事项：
- 核心在于 DOM 操作，puppeteer 仅提供运行环境和导出方式
- 只要能访问的页面都能生成，history 与 hash 模式无限制
- 不受项目和框架的限制，vue 和 react 等项目零修改即可复用
- 生成色块的单位为百分比，不同设备自适应
- 不需要 css-tree 来提取样式，不依赖页面本身的布局结构，生成扁平的 DOM 节点体积特别小
- 支持自定义生成方式与导出方式
详细使用参考网址https://www.imooc.com/article/253387、https://github.com/famanoder/dps
dps插件使用步骤：
1、使用命令【npm i draw-page-structure -g】安装插件
2、dps init 生成配置文件dps.config.js
3、修改dps.config.js 进行相关配置，包括想渲染的页面url、通过includeElement和init方法调整骨架屏效果等；
4、dps start 开始生成骨架屏
参考文章有：
Vue页面骨架屏注入实践 ：
用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏、
