Skip to main content

骨架屏

主要有几种实现方式：

  1. 使用图片、svg 或者手动编写骨架屏代码，简单理解就是手动给模块组件增加 loading
  2. 通过预渲染手动书写的代码生成相应的骨架屏。该方案做的比较成熟的是 vue-skeleton-webpack-plugin，通过 vueSSR 结合 webpack 在构建时渲染写好的 vue 骨架屏组件，将预渲染生成的 dom 节点和相关样式插入到最终输出的 html 中
  3. 借助 page-skeleton-webpack-plugin 在构建阶段生成骨架屏代码
    1. webpack 构建阶段，通过无头浏览器 puppeteer 模拟打开网页，等待页面渲染完后注入提取骨架屏的脚本
    2. 对页面中元素进行删减或增添，对已有元素通过层叠样式进行覆盖，这样达到在不改变页面布局下，隐藏图片和文字，使得其展示为灰色块
    3. 以 base64 图片或"HTML+样式 style 代码"两种形式进行输出

第一种是比较麻烦，第二种的话需要维护额外的 SSR 服务，第三个方法则存在骨架和真实网页可能不符合的风险，不过比较小，也可以通过一些样式细节的调整来解决。一般建议可以用第三种方法