vue优化之骨架屏

1. 什么是骨架屏如果一个web页面加载内容过多，刷新的时候会有空白页，造成不好的用户体验，但是如果加入骨架屏可以改善这一问题，骨架屏可理解为页面加载前的简单呈现版本，当页面加载完成，骨架屏各个占位区域被实际资源替换，可让用户觉得内容正在加载即将呈现，体验更加流畅。实际应用比较广泛，CSDN，小米商城等很多大型网站都用到了骨架屏方案。2.如何实现不建议：vue框架的原理是替换掉inde...

kiki·

4239人浏览 · 2019-07-01 10:13:29

kiki· · 2019-07-01 10:13:29 发布

1. 什么是骨架屏

如果一个web页面加载内容过多，刷新的时候会有空白页，造成不好的用户体验，但是如果加入骨架屏可以改善这一问题，骨架屏可理解为页面加载前的简单呈现版本，当页面加载完成，骨架屏各个占位区域被实际资源替换，可让用户觉得内容正在加载即将呈现，体验更加流畅。实际应用比较广泛，CSDN，小米商城等很多大型网站都用到了骨架屏方案。

2.如何实现

不建议： vue框架的原理是替换掉index.html中id为app的div部分，如果加载内容多，这一部分渲染就会慢（如果也不采用按需加载），可以在body部分加入骨架屏需要的图片，但是并不优雅，修改不方便，如果骨架屏内容过多，在这里展示显然不合适，而且无法实现多页面骨架屏，因此不推荐这种

 <body>
     <img src="../static/img/skeleton_bg.jpg" style="width: 100%;height: 100%;position: absolute;left:0;top:0;right:0;bottom:0;margin: auto"/>
     <div id="app"></div>
  </body>

建议：如何合理且优雅地实现骨架屏
代码实现：

安装依赖
- npm install vue-skeleton-webpack-plugin

在src目录下新建骨架屏页面Skeleton.vue、入口entry-skeleton.js

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">
    <img src="../static/img/skeleton_bg.jpg" />
  </div>
</template>

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

<style scoped>
img{
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;top:0;
  right:0;
  bottom:0;
  margin: auto
}
</style>

创建了骨架页面，不放到index里面也是不行的，因此在打包的时候做下面的处理，在build文件夹里新建文件webpack.skeleton.conf.js，目的是读取entry-skeleton,写入打包配置

'use strict';
const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')

const config = require('../config')
const utils = require('./utils')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

function resolve(dir) {
  return path.join(__dirname, dir)
}

let skeletonWebpackConfig = merge(baseWebpackConfig, {
  target: 'node',
  devtool: false,
  entry: {
    app: resolve('../src/entry-skeleton.js')
  },
  output: Object.assign({}, baseWebpackConfig.output, {
    libraryTarget: 'commonjs2'
  }),
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: []
})

//important: enable extract-text-webpack-plugin,让颜色生效
// 重点配置
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
})

module.exports = skeletonWebpackConfig

打包，在webpack.prod.conf.js和webpack.dev.conf.js 的plugins部分，加入plugin
```
new SkeletonWebpackPlugin({
     webpackConfig: require('./webpack.skeleton.conf'),
     quiet: true,
   }),
```
运行一下，在加载页面时，有如下效果

点击加入群聊【小程序/HTML/WPF交流】，一起学习交流:663077768

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^