- 项目是
Angular项目，通过Ng Cli创建的，没有使用webpack - 使用的组件库是
Ant Zorro Mobile
- NG-ZORRO的骨架屏 Skeleton，样式难以自定义，纯靠配置，且在不用其他组件的情况下引入一个不是特别好用的骨架屏组件却安装了整个组件库有点得不偿失 - 缺点：耦合代码的同时自由度又不够，很难自定义
<!-- NG-ZORRO 骨架屏 Skeleton - https://ng.ant.design/version/8.5.x/components/skeleton/zh#components-skeleton-demo-children -->
<!-- 需要自己指定多少行，无法自定义图片的具体样式，图片一定在左无法在上，灵活度太差，耦合度却太高 -->
<nz-skeleton [nzLoading]="!productDatas?.length" [nzActive]="true" [nzAvatar]="{size:'large',shape:'square'}"
[nzParagraph]="{rows:1,width:[60]}" [nzTitle]="{width:100}">
<!-- 实际内容代码 -->
</nz-skeleton> - 饿了么的骨架屏方案page-skeleton-webpack-plugin，据说可以通过一个无头浏览器遍历dom节点生成对应的骨架屏代码并自动加入到代码里 - 缺点：停更三年，无人维护，ng项目没用webpack而是ng cli，项目先天性就很难融合进来，且停更非常要命
npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin-
如果是界面是由UI设计的，直接每次页面变动时让UI提供一份灰色的布局图SVG在没渲染时展示即可，但是由于我们项目没有美工和设计图，因此不考虑
-
自己定制个简单的骨架屏样式类或者指令：耦合代码，但自由度高，不用担心不兼容和停更问题（效果类似ant design的骨架屏组件，相对而言不需要额外引入，可自己定制展示，但是与业务代码耦合较严重）
/* 样式类似ant zorro的骨架屏组件样式即可 */
.skeleton{
background: linear-gradient(90deg,rgba(190,190,190,.2) 25%,rgba(129,129,129,.24) 37%,rgba(190,190,190,.2) 63%);
background-size: 100% 100%;
animation: ant-skeleton-loading 1.4s ease infinite;
}
@keyframes ant-skeleton-loading{
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}-
编写一个chrome插件，自动截取网站内容，再通过canvas将截屏灰白化转换为html代码，直接在使用的地方没加载前使用根据路由自动生成的组件即可（或者制作一个网站用来上传图片自动生成对应框架的代码供人使用，不用担心人力在界面大改时重新修改骨架屏代码，自动生成，缺点是如果需要更新需要人手动去网站生成复制下骨架屏代码，且需要时间设计和实现该方案）
-
网易考拉
awesome-skeleton骨架屏自动生成方案：
# 全局安装
npm i awesome-skeleton -g
# 新增配置文件
touch skeleton.config.json
# 填写配置
# 开始生成
skeleton -c ./skeleton.config.json配置文件示例:
{
"pageName": "index",
"pageUrl": "要访问的地址",
"openRepeatList": true,
// 为空时是PC，手机端可填写：iPhone X
"device": "",
"minGrayBlockWidth": 80,
"minGrayPseudoWidth": 10,
"debug": true,
"debugTime": 3000,
"cookies": []
}- 京东金融
dps骨架屏自动生成方案：
# 解决镜像源问题
# npm config chromedriver_cdnurl http://npm.taobao.org/mirrors/chromedriver
# npm config puppeteer_download_host https://npm.taobao.org/mirrors
# npm i puppeteer -g
# 一键安装
npm i draw-page-structure -g
# 初始化配置
dps init
# 生成骨架屏
dps start更多内容：a way to make skeleton screen, 一种自动生成网页骨架屏的方式
发现的问题：
- 默认配置生成的骨架屏内容不太对
- 设置
device为pc了，但其内容还是不太像实际电脑渲染后的结果