vue优化之骨架屏 - 成就云开发者社区

1. 什么是骨架屏

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

2.如何实现

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

代码语言：javascript

复制

 <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

代码语言：javascript

复制

import Vue from 'vue'
import Skeleton from './Skeleton'
export default new Vue({
  components: {
    Skeleton
  },
  template: '<Skeleton />'
})

Skeleton.vue

代码语言：javascript

复制

<!--骨架屏-->
<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,写入打包配置

代码语言：javascript

复制

'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

代码语言：javascript

复制

new SkeletonWebpackPlugin({

webpackConfig: require('./webpack.skeleton.conf'),

quiet: true,

}),

运行一下，在加载页面时，有如下效果