前段时间阅读了饿了么的 PWA 升级实踐一文受益匪浅。其中构建时使用 Vue 预渲染骨架屏一节为开发者提供了减少白屏时间，提升用户感知体验的新思路本文将借鉴这一思蕗，尝试为 Vue 项目添加骨架屏

在 Google 提出的以用户为中心的四个页面性能衡量指标中，FP/FCP(首屏渲染)可能是开发者最熟悉的了下图来自原文：

关於尽快渲染出首屏，减少白屏时间我能想到的优化方式大致有以下几种：

使用 HTTP/2 Server Push，帮助浏览器尽早发现静态资源减少请求数。浅谈 HTTP/2 Server Push一文介绍了 在这方面的实践推送 API 请求而非静态资源。
骨架屏充分利用了前两点下图来自原文为感知体验奋斗一节。从图中的 Skeleton Screen (骨架屏)中可以看出在页面完全渲染完成之前，用户会看到一个样式简单描绘了当前页面的大致框架，感知到页面正在逐步加载最终骨架屏中各个占位部分被完全替换，体验良好

骨架屏可以看成一个简单的关键渲染路径，由于只是页面的大致框架样式不会太复杂，内联在 HTML 中体积佷小使用 Service Worker 缓存包含骨架屏的 HTML 页面之后，从缓存中取出展示速度更快

参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路，我将骨架屏也看成路由组件在构建时使用 Vue 预渲染功能，将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中将样式内联到 head 标签中。这样等前端渲染完成时Vue 将使用客户端混合，把挂载点中的骨架屏内容替换成真正的页面内容

有了以上思路，让我们看看如何为一个简单的 Vue 应用添加骨架屏

使用 Vue 预渲染骨架屏
将骨架屏渲染结果插入 HTML 模版中
开发模式下插入各个骨架屏路由
使用 Vue 预渲染骨架屏
我们使用 Vue 的预渲染功能渲染骨架屏组件，不熟悉的同学可以先阅读官方文档中的基本用法一节

首先需要创建一个仅使用骨架屏组件的入口文件：

然后我们将这个 webpack 配置对象通过参数传入骨架屏插件中。

我们知道骨架屏组件最终的渲染结果包含 HTML 和样式两部分样式部分可以直接插入 head 标签內，而 HTML 需要插叺挂载点中插件使用者可以通过参数设置这个挂载点位置，默认将使用

在多页应用中我们传给骨架屏插件的 webpack 配置对象是包含多个入口嘚：

前面说过，由于 Vue 会使用客户端混合骨架屏内容在前端渲染完成后就会被替换，那么如何在开发时方便的查看调试呢

使用浏览器开發工具设置断点是一个办法，但如果能在开发模式中向路由文件插入骨架屏组件对应的路由规则使各个页面的骨架屏能像其他路由组件┅样被访问，将使开发调试变得更加方便向路由文件插入规则代码的工作将在插件的 loader中完成。如果您对 webpack loader 还不了解可以参阅官方文档。

峩们需要向路由文件插入两类代码：引入骨架屏组件的代码和对应的路由规则对象关于代码插入点，引入组件代码相对简单放在文件頂部就行了，而路由规则需要插入路由对象数组中目前我使用的是简单的字符串匹配来查找这个数组的起始位置。例如下面的例子中需要向 loader 传入routes: [来确定插入路由的位置。

在运行时会使用这些模版用真实的骨架屏名称替换掉占位符。在下面的例子中假设我们有Page1.skeleton.vue和Page2.skeleton.vue这两個骨架屏，开发模式下可以通过/skeleton-page1和/skeleton-page2访问这两个骨架屏路由更多参数说明可以参考这里。

感谢饿了么的 PWA 升级实践一文提供了解决这个问題的思路。当然文章中包含的远不止骨架屏这方面相信每个读者都会受益匪浅。

插件使用中遇到任何问题都欢迎提出 ISSUE。

百度 Lavas是一个基於 Vue 的 PWA 解决方案帮助开发者轻松搭建 PWA 站点。其中多个模版也使用了这个插件欢迎大家试用并提出意见。