vue首屏优化之骨架屏

为什么要使用骨架屏

在针对SPA应用进行首屏优化的时候，我们是尽可能地减少白屏时间，使首屏内容尽早的展现出来，可因为SPA应用的特性用JS绘制dom，在js未加载完成时dom不会被绘制出来，所以虽然白屏时间可以通过减少http请求，压缩请求体积等各种方法来缩短，但根本上是无法清除的。短暂的白屏会被用户不好的体验，常用的做法可以在内容未加载出来前添加一个loading的动画，今天介绍的骨架屏算是loading的一个进阶版。骨架屏是在页面完全渲染之前，用户会看到一个样式简单，绘制了页面大致框架，在感知到页面加载完成时，会替换到骨架屏占位的部分。在现在很多应用中都已经得到试用，如知乎，简书，饿了么等。

实现

这边以在vue项目中实现为例，我使用的是vue-skeleton-webpack-plugin插件,它将骨架屏也看成路由组件，在构建时使用 Vue 预渲染功能，将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中，将样式内联到 head 标签中。这样等前端渲染完成时，Vue将使用客户端混合，把挂载点中的骨架屏内容替换成真正的页面内容。

安装

npm install vue-skeleton-webpack-plugin

创建骨架屏组件

和一般创建vue组件一致，在vue中编写骨架屏式样。因为我项目中业务的需要，我是单页面多骨架屏。需要编写两个骨架屏组件文件，分别为Skeleton1.vue和Skeleton2.vue。

创建骨架屏组件入口文件

该文件使用上面创建的骨架屏组件

import Vue from 'vue';
import Skeleton1 from './Skeleton1';
import Skeleton2 from './Skeleton2';

export default new Vue({
    components: {
        Skeleton1,
        Skeleton2
    },
    template: `
    

        
        
    
    `
});

在webpack文件中配置

在webpack.prod.conf.js文件中的plugins里添加下面代码，多骨架屏需配置router，根据不同路由展示不同骨架屏组件，单骨架屏可不用配置。

new SkeletonWebpackPlugin({
  webpackConfig: {
      entry: {
          app: path.resolve(__dirname, '../skeleton/entry-skeleton.js')
      },
      quiet: true,
        minimize: true,
        router: {
            mode: 'history',
            routes: [
              {
                path: '/page1',
                skeletonId: 'skeleton1'
              },
              {
                path: '/page2',
                skeletonId: 'skeleton2'
              }
            ]
        }
    }
})

实现效果

上述开发完成，即可执行打包，在打包完成后打开打包好的index.html文件可以看到在HEAD中插入了骨架屏的式样，

下面的内容替换成了骨架屏的内容，如果是多骨架屏还会插入一段判断路由展示隐藏对应骨架屏的js代码。下面附上实现效果

实现中遇到的问题

1.配置router未生效，未根据不同router展示不同骨架屏或直接不展示骨架屏。

这个先排查自己的router配置正不正确。我在确认多遍之后还是发现未生效，去扒了下插件的源码，打了几个日志发现有处取值存在问题，ref取值为options，在options后面加上.webpackConfig，修改之后成功了，我的做法是把代码改了copy出来，单独引用，不走npm安装，不然换了个环境不能每次都去改node_modules文件下的代码。

2.骨架屏式样不正确

因为我使用了postcss-pxtorem插件，在骨架屏打包出来后，对px都做了一次转rem，本来是flexible.js会根据设备设置根的font-size，但在渲染骨架屏时该js还未引入，导致这是根font-size还是默认的16px,故导致式样出了问题，有几种解决方案：

• 把flexible.js加载放在前面，或者直接把flexible.js的代码写入index.html里。缺点：骨架屏需要额外的js代码
• 根据font-size:16px调整计算骨架屏中式样的px大小。缺点:计算繁琐
• 直接把px改为PX,postcss-pxtorem会跳过不转换。缺点：不能根据设备调整大小。