骨架屏插件

  • 骨架屏插件

  • 插件实现逻辑

    • init阶段
      • 插件初始化，生成可接收的本地服务器响应server，初始化socket(连接client中sockjs，并初始化响应代码)，响应操作，初始化skeleton对象(操作浏览器视图，及转换)
      • vite transformIndexHtml 生命周期中添加script脚本（该脚本可在初始化服务器中响应）
    • 运行阶段
      • 加载添加的script脚本
      • server响应，加载到client中的代码，可以响应toggleBar
      • 通过浏览器控制台输入toggleBar,调用client中代码，执行操作，显示html
      • 点击html中的显示编辑页面，通过SockJS触发sock.send操作
      • 响应sockjs,调用skeleton操作，并把页面数据写入sockjs中，最后打开preview页面(编辑页面)
      • preview页面获取前面的页面链接，并读取sockjs中的数据，利用iframe分别展示正常页面和骨架屏页面，及代码页面
      • 点击写入按钮，可以生成骨架屏html文件
    • 待完成
      • 在build阶段可以骨架屏html替换 <!-- shell --> 注释，生成最后代码

  • Skeleton 主要逻辑

    • 利用puppeteer控制浏览器
    • 利用puppeteer获取页面,通过api调用page，并插入script代码（script/index中Skeleton，为转化标签的代码），并执行，生成骨架代码，写入内存中，等编辑页请求时返回

puppeteer中文文档