2023.3.3 星期五

实际

通过chrome插件，生成了骨架屏代码，放到<div id='app'></div> 内。
也可以在接口请求结束后移除骨架屏。

基本方式

生成骨架屏的方式主要有：

手写HTML、CSS的方式为目标页定制骨架屏
做法可以参考【Vue页面骨架屏注入实践】，主要思路就是使用 vue-server-renderer 这个本来用于服务端渲染的插件，用来把我们写的.vue文件处理为HTML，插入到页面模板的挂载点中，完成骨架屏的注入。这种方式不甚文明，如果页面样式改变了，还得改一遍骨架屏，增加了维护成本。骨架屏的样式实现参考 CodePen
使用图片作为骨架屏；
简单暴力，让UI同学花点功夫吧哈哈；小米商城的移动端页面采用的就是这个方法，它是使用了一个Base64的图片来作为骨架屏。
自动生成并自动插入静态骨架屏
vue-skeleton-webpack-plugin

awesome-skeleton

https://github.com/kaola-fed/awesome-skeleton

骨架图生成组件，仅限node端使用。该组件提供骨架图生成和骨架图模板注入两个能力。
骨架图生成逻辑：通过传入页面地址，使用 Puppeteer 无头浏览器打开页面地址，对页面首屏图片和文本等节点进行灰色背景处理，然后对页面首屏进行截图，生成压缩后的 base64 png 图片。

#11 考拉前端骨架屏生成技术揭秘

通过设计师给出的骨架屏图片。
通过 HTML+CSS 编写骨架屏代码。
非侵入式自动生成骨架屏代码。

本文主要针对自动生成骨架屏技术进行了深入的探讨，并开发了 awesome-skeleton，支持多种配置，以及骨架屏定制功能，并提供骨架图生成和骨架图模板注入能力。

使用 awesome-skeleton

通过上述讨论的技术方案，我们实现了 awesome-skeleton 骨架屏生成工具。支持命令行生成骨架屏代码，同时也可以非常方便的在第三方平台接入。

page-skeleton-webpack-plugin

https://github.com/ElemeFE/page-skeleton-webpack-plugin

Page Skeleton 是一款 webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。

支持多种加载动画
针对移动端 web 页面
支持多路由
可定制化，可以通过配置项对骨架块形状颜色进行配置，同时也可以在预览页面直接修改骨架页面源码
几乎可以零配置使用

#21 一种自动化生成骨架屏的方案
今天的分享主要分为三个部分：
首屏加载状态演进
如何构建骨架屏
将骨架屏打包的项目中

下面我将通过 page-skeleton-webpack-plugin 工具中的代码，来展示骨架屏的具体生成过程。

# 22 前端骨架屏方案小结
作为首屏渲染(自动化方案)

该方案是饿了么在骨架屏的实践中总结出的一套方案:

骨架屏的dom结构和css通过离线生成后构建的时候注入模板中的节点下面.
原理相关eleme骨架屏插件实现原理
方案的项目地址:page-skeleton-webpack-plugin

smart-skeleton-screen

# 31 什么？都1202年了，你还在手写骨架屏
# 31 骨架屏自动化？看这篇就够了
百度 - vue-skeleton-webpack-plugin
<!–
实现原理
通过 vueSSR (vue 服务端渲染)结合 webpack 在构建时渲染写好的 vue 骨架屏组件，将预渲染生成的 DOM 节点和相关样式插入到最终输出的 html 中

不足
预渲染的骨架屏组件需要开发者编写（对于想偷懒的小伟来说明显不是最优解🙄️）
方案只适用于vue项目(小伟的H5项目既有react也有vue) –>
京东 - dps
<!–
实现原理
通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架页面的页面，在等待页面加载渲染完成之后, 执行遍历dom树的脚本代码，通过单纯的 DOM 操作，挑选目标节点，生成骨架屏html和css代码

不足

无法选择生成骨架屏的时机。当页面存在着重定向(H5需要鉴权)的时候，生成的骨架屏和预期相差比较大
内部实现并不完善，某些元素比如伪元素等无法生成骨架屏
某些依赖浏览器jsbridge接口的页面，工具无法使用 –>
饿了么 - page-skeleton-webpack-plugin
<!–
实现原理

通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架页面的页面，在等待页面加载渲染完成之后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，对已有元素通过层叠样式进行覆盖，这样达到在不改变页面布局下，隐藏图片、文字和图片的展现，通过样式覆盖，使得其展示为灰色块。并且将修改后的 HTML 和 CSS 样式提取出来，通过 webpack 插件的形式注入最后生成的html中，并且还可以启动 UI 界面专门调整骨架屏代码。

不足

由于生成的骨架屏节点是基于页面本身的结构和样式，在某些嵌套比较深的页面，骨架屏代码体积不会很小，并且对于多路由的页面，生成的代码就更加庞大了
无法选择生成骨架屏的时机。当页面存在着重定向(H5需要鉴权)的时候，生成的骨架屏和预期相差比较大
某些依赖浏览器jsbridge接口的页面，工具无法使用
只支持history路由 –>

## 骨架屏代码如何生成
## 如何将生成的骨架屏代码插件集成到项目中
当我们把骨架屏代码保存到用户项目之后，我们一样可以借用构建工具插件的功能，遍历骨架屏文件夹，获取所有骨架屏代码，再插入到项目的html中，其实就是一个简版的HtmlWebpackPlugin。

## 骨架屏编辑器
### 无痛接入smart-skeleton-screen
安装插件包 (根据项目构建工具选择相关的插件包，以webpack为例)
tnpm install @tencent/smart-skeleton-screen

1	<div id="app"><% smart-skeleton %></div>

draw-page-structure

https://github.com/famanoder/dps#readme

automatic: easy to use CLI to make skeleton screen
flexible: just use javascript even in browser
simple: some usefull config items do it well

可在控制台输出当前页面骨架屏节点，复制添加到应用页面；该做法目前来说最大的作用在于应对需要登录的页面，可在相应页面直接调用evalDOM函数生成该页面的骨架屏节点；

# 71 前端骨架屏自动生成方案
# 71 一种对开发更友好的前端骨架屏自动生成方案

page-skeleton-webpack-plguin 生成骨架屏的方案可以根据项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。
它的不足之处在于：
实际使用过程中无法监听接口返回导致生成骨架屏的时机是否准确
生成的页面与业务人员写的结构质量有直接关系，经常出现需要手工二次调整的情况

在方案调研过程中，draw-page-structure 为我们的设计提供了灵感。 –>
draw-page-structure

create-skeleton-quickly

# 81 前端可视化工具（自动生成骨架屏代码）
npm i create-skeleton-quickly -g

PS: 和项目无关。启动独立服务，传入页面路径。

skeleton

# 113 一个前端非侵入式骨架屏自动生成方案

基于 React Native

# 443 干货 | 前端智能化探索，骨架屏低代码自动生成方案实践
目前业界对于自动化骨架屏的实现方式有以下两种主流方案。
1.2.1 puppeteer 自动生成骨架
1.2.2 现有的 RN 实现方案

我们实现的骨架屏方案主要基于 React Native，但从 DSL 层面来说，这样的方案可以移植到任何前端框架方案中进行实现。
最终实现的方案不仅达到了预期，还具有以下特点：

可针对多种前端方案，输出对应的骨架屏代码；
结合视觉稿标注平台，由视觉设计师的 UI 设计稿可直出可用的代码内容；
解放开发同学的双手，复制粘贴即可使用，不需要做节点标示、筛除；
封装骨架屏 loading 动画，开箱即用；
从视觉稿标注平台，可直接预览生成后的代码效果，方便快捷。

基于 BeeMa 架构和vscode插件

# 444 自动化生成骨架屏的技术方案设计与落地
<!–
方案调研
骨架屏技术方案上从实现上来说大致可以三类：

手动维护骨架屏的代码（HTML、css or vue 、React）
使用图片作为骨架屏
自动生成骨架屏
对于前两种方案有一定的维护成本比较费人力，这里主要介绍下自动生成骨架屏的方案。
技术方案
目前市面上主要使用的是饿了么开源的 webpack 插件：page-skeleton-webpack-plugin。它根据项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。这种方式将骨架屏代码与业务代码隔离，通过 webpack 注入的方式骨架屏代码（图片）注入到项目中。优势非常明显但是缺点也显而易见：webpack配置成本（还依赖html-webpack-plugin）。 –>
综合如上的技术调研，我们还是决定采用最低侵入业务代码且降低配置成本的骨架屏自动生成的方案。参考饿了么的设计思路，基于 BeeMa 架构和vscode插件来实现一个新的骨架屏生成方案。

目前仅支持 beema 架构源码开发

#
#