@jdpop/page-skeleton-webpack-plugin
- 1 简介
- 1.1 编写目的
- 1.2 参考资料
- 2 基本方案
- 3 模块划分
- 3.1 Puppeteer
- 3.2 ToolBar
- 3.3 Preview
- 4 配置项优化
- 4.1 配置项修改
- 4.2 配置项新增
- 5 骨架屏应用场景
- 5.1 适用场景
- 5.2 不适用场景
- 5.3 功能支持程度
1 简介
自动化生成骨架屏插件，根据项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过webpack打包到对应的静态路由页面中。
- 支持多种加载动画
- 支持移动端、PC端 web 页面
- 支持多路由配置
- 可定制化，可以通过配置项对骨架块形状颜色进行配置
- 几乎可以零配置使用
1.1 编写目的
现在前后端分离的架构已经得到认可，很多团队都采用这种架构，再带来便利的同时也有一些弊端，例如白屏问题，如果白屏时间过长，会严重影响用户的体验。
为了减少白屏时间，优化首屏渲染有很多解决方案，骨架屏就是优化用户体验的方案之一，现有骨架屏插件对于现有业务有写不太符合的地方，因此基于市面上的骨架屏插件进行优化，提供骨架屏方案和插件方便内部系统的接入。
该插件支持的是基于饿了么骨架屏插件进行的优化
1.2 参考资料
1、Puppeteer 2、sockjs-client 3、page-skeleton-webpack-plugin
2 基本方案
通过 puppeteer 在服务端操控 headlessChrome （无头浏览器） 打开需要生成骨架屏的页面，页面加载完成后在等待页面加载渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样式进行覆盖，这样达到在不改变页面布局下，隐藏图片、文字和图片的展现，通过样式覆盖，使得其展示为灰色块。将修改后的 HTML 和 CSS 样式提取出来，这样就是骨架页面了。
3 模块划分
3.1 Puppeteer
Puppeteer：Puppeteer是一个Node库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行。
1、创建浏览器实例，打开一个页签
2、插入对节点处理的脚本文件
3、执行脚本生成最终骨架页面
4、通过screenShot对生成骨架屏截图
3.2 ToolBar
默认不显示，通过 Ctrl|Cmd + enter 呼出插件交互按钮，或者在在浏览器的 JavaScript 控制台内输入toggleBar 呼出交互按钮，通过点击按钮，启动puppeteer生成骨架屏图片和代码并在预览页面中打开。
3.3 Preview
骨架屏预览页面
1、支持手机扫码预览（在同一个局域网下），点击手机的图标弹出二维码进行扫码操作
2、点击铅笔的图标执行写入操作，将代码写入到shell文件
3、PC端可以看到骨架屏页面的效果，移动端可以看到真实页面和骨架屏页面的效果
4、多路由，通过切换路由展示不同页面的骨架屏
4 配置项优化
在插件原有配置基础上，对节点的配置项进行优化，删除单个类型节点配置项，通过设置颜色对所有节点生成的骨架屏色块进行统一配置，圆角等其他属性保持和业务代码一致，并且添加对PC的支持和图片型骨架屏生成，主要改动如下：
4.1 配置项修改
1、路由（routes）
路由数组支持传入对象和字符串两种形式 （对象使用场景：路由需要传递参数）
例：
routes: ['/', '/search', {
path: '/detail/:serviceCode',
params: {
serviceCode: 'FW_GOODS-549810'
}
}]2、骨架屏加载样式（loading）
添加默认状态（null）的样式展示，共支持四种样式展示null spin chiaroscuro shine
3、cookie
添加对字符串的支持，支持字符串和数组两种形式的传值，数组传参参考puppeteer
4、以下配置型修改：不需要处理的元素（excludes），不需要生成骨架屏的元素（remove），通过透明度隐藏（hide）和灰色块形式展示（grayBlock）
将原有配置项删除，通过对html节点属性的配置进行操作，每次修改完后不需要重新启动项目，只需要重新生成骨架屏即可
5、设备（device）
添加对PC端的支持，默认传入PC
设置哪个移动设备模拟器来生成骨架页面。参考puppeteer进行配置。
6、样式单位（cssUnit）
添加对PC端的支持，支持样式单位配置px
4.2 配置项新增
1、请求拦截处理（interception）
需要终止（abort）的请求放到interception数组中处理
2、骨架屏类型（skeletonType）
骨架屏支持两种类型的生成：IMG（默认） & HTML
IMG：通过将骨架屏作为图片插入成body背景，将实际的页面内容做隐藏，默认监听到第1个ajax请求回来，则将骨架屏切掉（解决白屏问题） —— 推荐 HTML：通过生成 html 的结构插入骨架屏，JS框架还未执行前先渲染骨架屏，可能会出现框架初始化后等待接口返回期间仍会存在白屏问题
3、图片型模式（automatic）
目前支持两种模式：First ajax automation（默认） & Manual switching
First ajax automation：监听到第一个ajax请求返回，将骨架屏切掉
Manual switching：通过window.skeletonImgChange方法手动对骨架屏进行显示隐藏操作，为true显示骨架屏，false隐藏骨架屏
4、移动端对html的font-size设置（htmlFontSize）
5 骨架屏应用场景
5.1 适用场景
白屏时间过长的spa应用，使用骨架屏优化用户的等待体验
5.2 不适用场景
1、不适用于一些动态布局的页面
2、由一个视频、一张图片或者canvas绘画生成的元素撑起一个页面（骨架屏会将整个页面渲染成灰色色块，不适用）
5.3 功能支持程度
@jd/page-skeleton-webpack-plugin插件在PC服务市场和移动版服务市场可以成功接入，目前插件已经完成对以下功能的支持
1、骨架屏插件已支持：
- PC端骨架屏生成
- 移动端骨架屏生成
- spa多路由支持
- 需要登录系统的骨架屏生成
- 监听第一个ajax返回，自动切换调骨架屏方案
- 多种加载动画的支持
2、骨架屏插件待支持：
- hash 路由不同页面骨架屏生成，目前只支持1个页面
思考：对于 hash 路由，因为访问的是对应静态路径上的 html 文件，路由切换完全靠 hash 进行识别。
因此思路就是将要生成骨架屏的页面的图片全打入 index.html 上，不过这样会导致 html 过大，因此对于 hash 类型的应用建议不要对太多的页面生成骨架屏。
之后，根据插件配置中的路由列表，在 html 中生成 1 份路由匹配的 JS 代码，通过匹配当前的 hash 是哪个路由，选择对应的背景图片。对于没有匹配上的路由，则不设置骨架屏。
- 移动端同时适配手机和ipad系统的不同骨架屏生成
思考：对于移动端页面需要适配 ipad 的场景，因为 ipad 的适配相较于手机的适配多了不少媒体查询和布局的变动，因此 ipad 的骨架屏大部分是跟手机是有明显出入的，思路有两种：
1、在生成骨架屏时，支持增加 ipad 生成，生成 手机端 和 ipad 端 两端的骨架屏图片，通过媒体查询展示不同的骨架屏图片。
