page-skeleton骨架屏的实现

什么是骨架屏

骨架屏指的是当你打开一个 web 页面，在页面解析和数据加载之前，首先展示给用户大概的样式。

为什么需要骨架屏

• Google Research 的研究显示，53% 的用户在等待加载 3s 后，选择关闭 Web 页面或应用，导致用户流失。
• 当下前端框架，基本都是js 驱动型的，也就是说在JS 代码解析完成之前，页面是不会展示任何内容，即所谓的白屏。
• 用户体验、用户感知会更友好。

现有市面上的方案

• 手写骨架屏 手动html+css样式占位

缺点： 跟不上UI改变与需求更迭，属于机械化劳动方式。

• 内容直出 服务端渲染（ssr） 或者 vue 预渲染

缺点： 内容直出，需要服务端支持，涉及到服务构建、部署、缓存等，成本与风险加大。

• 结合当前项目，与各方优缺点，这里采用page-skeleton-webpack-plugin（element 自动生成骨架屏插件），进行尝试。

优点：对现有页面、构建工具侵入性最小。
缺点：生成会有差异，需人工校验，且打包有一定的样式内容体积。

page-skeleton-webpack-plugin 插件的基本思路

通过 puppeteer 打开开发中的需要生成骨架屏的页面，在等待页面加载渲染完成之后， 在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样式进行覆盖，这样达到在不改变页面布局下， 隐藏图片和文字，通过样式覆盖，使得其展示为灰色块。最后将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架屏了。
主要步骤思路如下：

演示&体验流程：

• 1、更新leka 命令 - 引入page-skeleton 插件 & 替换<--shell -->插件
• 2、安装依赖，（有puppteer 需用cnpm）
• 3、跑leka serve 模式，进行骨架屏生成（评估好是否合适用骨架屏）
• 4、本地prod打包， (web_leka是新乐效，就上传shell 目录文件内容，然后打包进去)

骨架时序图

修改部分说明

• 修复一些page-skeleton-webpack-plugin插件问题，详见 Demo 踩坑
• 优化预览二维码，实现实时修改样式，二维码实时更新
• 手机扫一扫预览，加入适配flexible.js,保证看到的样式更真实
• 调整priview 预览，把原1280宽度改成375手机宽度

原1280宽度，容易误认为框内就是手机的全部: 

结合当前，需修改项

• 实际上线后，骨架屏会看到初始样式，然后才是适配后的样式, todo。
• 迁移到web_leka工程todo。
• weex 骨架是否可以生成？
• 调整、优化生成的dom, 如head块，app里是不需要的。

融入项目遇到

• Jenkins 读取指定目录地址无反斜线处理，导致读取失败。

const os = require('os')
os.type() // Linux Windows_NT Darwin

• 安装依赖过程耗时长，Jenkins 一直失败

1、依赖放dependencies。
2、npm config set puppeteer_download_host=https://npm.taobao.org/mirrors 保证安装成功

3-10 年内部岗位涉及前后端、PM（虾皮内推、乐信内推、vivo、oppo）推荐机会，欢迎联系，wx号： X915324 ； 也可发简历到： zgxie@126.com

详情请看 element 自动生成骨架屏， 这里是clone page-skeleton-webpack-plugin插件进行的。