SPA单页应用骨架屏的使用

说明

对于SPA单应用首次加载时间过程的问题，通过骨架屏来优化用户体验，不至于给用户一直展示空白页面。

以vue-skeleton为例，引入到现有的项目中。

使用

1.首先安装vue-skeleton插件

npm install vue-skeleton-webpack-plugin

2.创建骨架屏页面，在项目下创建 “skeletonHome.vue” 文件

注意：需要配合js代码的话，直接在div标签内部添加script标签。骨架屏不具备单独编译vue文件内部的js代码

<div class="skeleton-nav">
  <div class="skeleton-width">
  <div class="skeleton-nav-img"></div>
  <div v-for="item in 3" :key="item" class="skeleton-nav-item"></div>
    <div class="skeleton-nav-btns">
      <div class="skeleton-nav-btns__item" />
    </div>
  </div>

  <script>
    var skeDom = document.getElementById('skeletonTime')
    var pageTime = 0
    var setInter = null
  </script>
</div>

3.创建入口文件，在对于的路径下创建一个 “skeleton.js” 文件

骨架屏组件需要绑定一个id

import Vue from 'vue'
// 引用skeletonHome.vue文件
import skeletonHome from './SkeletonHome'

export default new Vue({
  components: {
    skeletonHome
  },
  template: `
      <div>
        <skeleton-home id="skeletonHome" style="display:none" />
      </div>
    `
})

4.在vue-cli配置中引用vue-skeleton插件

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

module.exports = {
  configureWebpack: config => {
      config.plugins.push(
        new SkeletonWebpackPlugin({
          webpackConfig: {
            // 引用入口文件
            entry: {
              app: resolve('./src/views/skeleton/skeleton.js')
            }
          },
          // 是否压缩
          minimize: true,
          // 需要使用骨架屏的路由，
          router: {
            mode: 'history',
            routes: [
              {
                // 绑定的具体路由
                path: '/',
                // 入口文件中骨架屏的id
                // 不同页面可以绑定不同id
                skeletonId: 'skeletonHome'
              },
              {
                path: '/verify',
                skeletonId: 'skeletonHome'
              }
            ]
          }
        })
      )
  }
}

总结

使用骨架屏后，客户端网速很卡的话，可以优化用户体验。