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 样式提取出来，这样就是骨架屏了。
主要步骤思路以下：

演示&体验流程：

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

骨架时序图

修改部分说明

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

  

结合当前，需修改项

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

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