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

男娘i 2021-07-26 19:48 1685阅读 0赞

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][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文件，需要在被写入内容的位置添加``占位符，本例子在`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][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_www.imooc.com_article_253387]、[https://github.com/famanoder/dps][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页面骨架屏注入实践 ：][Vue_]

饿了吗一种自动化生成骨架屏的方案

[用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏][https_www.imooc.com_article_253387]、

[dps(draw-page-structure)][https_github.com_famanoder_dps]插件使用

[Vue CLI]: https://github.com/vuejs/vue-cli
[https_segmentfault.com_a_1190000014832185]: https://segmentfault.com/a/1190000014832185
[https_github.com_Jocs_jocs.github.io_issues_22]: https://github.com/Jocs/jocs.github.io/issues/22
[https_www.imooc.com_article_253387]: https://www.imooc.com/article/253387
[https_github.com_famanoder_dps]: https://github.com/famanoder/dps
[Vue_]: https://segmentfault.com/a/1190000014832185%C2%A0