vue引入骨架屏

骨架屏

骨架屏，英文 Skeleton screen ，是指在页面开始渲染之前的白屏时间内，先让用户看到即将要展现页面的“骨架”，页面渲染完成之后再将它替换掉，起到一个从 白屏 → 渲染完成 过程中的过渡作用，它可以有效减少用户的感知时间，让用户“感觉上”认为打开页面比较快（相比较于完整的白屏时间）。

本文采用的是开源插件vue-skeleton-webpack-plugin骨架屏分本文所实现的骨架屏是 基于 Vue-cli 2.x +webpack3.12.0搭建的css分离项目 ，，根据的不同路由，显示不同的骨架屏，如需其他用法详见开源插件。

安装骨架屏插件

npm install [email protected]

相关依赖插件

npm install [email protected]

配置文件

1、主要配置页面

build目录下新建webpack.skeleton.conf.js

'use strict';

const path = require('path')
const merge = require('webpack-merge')
 const utils = require('./utils') 
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
 const config = require('../config')
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: [] 
})

/*//若只需要生产环境设置骨架屏，本段可删除
  skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
}); */

module.exports= skeletonWebpackConfig;

2、打包相关依赖

webpack.prod.conf.js加入相关依赖即可（若开发环境也需要测试骨架屏，也可以将其加在webpack.dev.conf.js中的相同地方即可）

//引入：
 const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')//骨架屏插件
//plugins中加入：
 new SkeletonWebpackPlugin({//骨架屏
       webpackConfig: require('./webpack.skeleton.conf'),
       quiet: true
   }),

3、骨架屏具体展示页面

src新建文件skeleton.vue

4、运行测试

F12打开开发者模式，点击横向导航栏中的Performance，选择右侧第二个设置图标（Capture settings），然后选择后Network中的Slow 3G,就可以移动端访问环境啦，若感觉效果不大，还可以选择CPU中的 6x slowdown

相关链接：
基于 vue-skeleton-webpack-plugin 的骨架屏实战：https://www.jb51.net/article/166906.htm
骨架屏插件：https://github.com/lavas-project/vue-skeleton-webpack-plugin

5、其他方法

此外还有许多使用骨架屏的方法：

page-skeleton-webpack-plugin饿了么开源的自动生成骨架屏生成插件，但是,这个暂不支持hash模式。
用 base64 的图片做骨架屏，就让 UI 在出设计稿的时候顺便把骨架屏也给画了