vue-cli项目添加骨架屏多种方式，自动生成骨架屏

vue-cli项目首页加载缓慢想要使用骨架屏效果，经过几天的踩坑，这里学习并记录一下vue项目自动生成骨架屏方法。

添加骨架屏，其优势在于：

• 写于HTML文件中，独立于Vue框架，节省了JS加载时间+JS全局环境创建的执行时间的时间
• 只在主页面根据页面结构独立编写，预先展示页面结构，进行视觉暂留，提供更好的交互感官
• 只在页面结构变化时进行修改，维护成本相对较低

骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。

那么重点就是怎么添加骨架屏 了，

大概方案有：

1. 手动编写骨架屏代码
2. 通过预渲染手动书写的代码生成相应的骨架屏
   比如：vue-skeleton-webpack-plugin
3. 饿了么内部的生成骨架页面的工具
   page-skeleton-webpack-plugin
4. JavaScript操作DOM 的方式结合 Puppeteer 自动生成网页骨架屏
5. 其他...

上述方案分析：

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 自动生成网页骨架屏、

dps(draw-page-structure)插件使用