h5骨架屏快速生成方案

背景： 原有的SSR改成部分CSR，部分SSR后，首页CSR的部分经过重构后，布局已发生较大变化，和原有骨架屏有较大出入，因此需要重新开发/生成骨架屏

• 方案的大概思路图

• 首页生成效果图

Install

npm i draw-page-structure -g

Usage

1. dps init 根据提示生成配置文件 dps.config.js

2. 修改 dps.config.js 进行相关配置

3. dps start 开始生成骨架屏

FQA

1. 安装时提示 There should only be one folder in a package cache...

   npm i draw-page-structure -g -- force

2. dps start 提示 Error: Cannot find module 'puppeteer'

   npm i puppeteer -g

3. pc骨架屏怎么生成？

   • skeleton.config.json 中device修改为PC

4. 生成代码还是生成图片？ 骨架屏采用生成的骨架图，在网页上转成base64格式放在node项目中，因为图片更轻量，生成的代码有五千多行，加载会慢