H5骨架屏实战

H5骨架屏实战

• 骨架屏可提升用户体验，在网络情况比较差的时候有比较好的体验。看骨架屏总比白屏舒服。
• 骨架屏可以理解为是：当数据还未加载进来前，页面的一个空白版本 ，一个简单的关键渲染路径。

vue-skeleton-webpack-plugin

• 基于 vue-skeleton-webpack-plugin

安装

• npm install vue-skeleton-webpack-plugin

配置webpack

• 在 webpack.dev.conf.js, webpack.prod.conf.js 中分别添加配置

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


  plugins: [
  ...
	new SkeletonWebpackPlugin({
      webpackConfig: {
        target: 'node',
        devtool: false,
        entry: {
          // 入口
          app: path.join(__dirname, '../src/entry-skeleton.js')
        },
        output: Object.assign({}, baseWebpackConfig.output, {
          libraryTarget: 'commonjs2'
        }),
        // css 分离，这样骨架屏组中的style才能正常显示
        externals: nodeExternals({
          whitelist: /\.css$/
        }),
        plugins: []
      },
      quiet: true
    }),
...
    
    ]

编码

• entry-skeleton.js 为骨架屏的入口配置文件

import Vue from 'vue'
import Skeleton from './Skeleton'

export default new Vue({
  components: {
    Skeleton
  },
  template: '<skeleton />'
})

• Skeleton.vue 是骨架屏界面,界面可由美工直接切好

<template>
  <div class="skeleton-wrapper" id="skeleton_wrapper_id">
    <section class="skeleton-block" style="text-align: center; margin-top: 30px;">
       <img src="data:image/png;base64,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" style="width: 325px;">
    </section>
  </div>
</template>

<script>

  export default {
    name: 'skeleton'
  }
</script>

<style scoped>
</style>

优化渲染

/* eslint-disable no-new */
const app = new Vue({
  router,
  components: { App },
  template: '<App/>'
})

// 如果 JS 晚于 CSS 加载完成，那直接执行渲染
if (process.env.NODE_ENV === 'production') {
  if (window.STYLE_READY) {
    app.$mount('#app')
  }
} else {
  app.$mount('#app')
}

• 效果图

参考