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.vue 是骨架屏界面,界面可由美工直接切好

优化渲染

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

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

• 效果图

参考