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
代码语言：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,
}),运行一下，在加载页面时，有如下效果
