骨架屏方案与实现 ​

本文参考实现：page2-skeleton-webpack-plugin

实现源码

实现步骤 ​

一、准备阶段 ​

1. 注册插件，监听 done 钩子
2. 编译完成后启动一个本地服务，并且设置项目打包后的 dist 文件夹，为服务的静态资源文件夹
3. 创建 Skeleton 实例
4. skeleton.init()初始化，使用puppeteer启动一个无头浏览器

二、生成骨架代码 ​

1. 使用无头浏览器，打开一个页面，并以某种机型启动，例如 iphone 6
2. 调用 addScriptTag，为页面注入 JS 脚本，并执行脚本，脚本所做的事：
   • 从 html 开始递归遍历所有 dom 节点，并收集 button 节点，img 节点等
   • 单独为每个收集到的节点，添加 class，例如.sk-img, 并生成 style 样式（包含骨架屏样式，例如灰色背景或者动画等）
   • append style 节点到 head 节点最后
   • 删除掉, 除了.sk-以外的所有 style 标签，meta 标签，script 标签等
   • 返回以上的 html 片段和 styles

三、写入文件 ​

1. 将上面生成的styles和html片段，替换掉我们项目生成index.html里的占位注释<!-- shell -->
2. 重新写入文件