一个可行的全路由骨架屏生成方案

发表于 分类于

前言

网上找了一圈关于vue骨架屏生成框架，但是目前最成熟的就是饿了么团队的page-skeleton-webpack-plugin，但是由于该插件只能支持history模式，所以比较受限；

改造

比较理想的自然就是同微信开发者工具给小程序提供的一键生成骨架屏的方案，不过好在确实有一个相近的骨架屏生成插件：famanoder/dps: a way to make skeleton screen, 一种自动生成网页骨架屏的方式；该插件的原理就是通过无头浏览器puppeteer来抓取预渲染的页面，然后根据一套规则对相应DOM结点生成对应的骨架图，最后生成一个HTML文件；不过该插件有以下几个不足：

  • 只能对单个页面进行骨架屏生成
  • 生成的HTML文件比较粗糙

但是，该插件只需要经过一些改动，就完全具备全路由页面的批量骨架屏生成；

  • 利用node环境变量来控制当前生成骨架屏的页面信息，然后用node脚本批量执行命令即可；

    img
    img
    img

  • 该插件开放了一些样式修改及DOM结构修改的函数，可自行修改结构，最重要的是可以利用node函数将骨架屏文件作为一个vue文件进行写入，然后在路由页引用；

    img
    img

基本效果

原始页面

img

对应的骨架屏页面

img

结论

  • 根据路由页面自动生成对应结构的骨架屏是完全可行的
  • 要是想提高可控性，完全可以自己利用puppeteerjs替代上述提到的插件，自己解析就好了

相关文档