vue-skeleton-webpack-plugin搭建骨架屏，以及nprogress优化用户体验

最近在优化手里面项目，发现项目首页加载实在很慢，第一次加载白屏显示时间很长，用户体验极差，所以自己鼓捣加个骨架屏和加载滚动进度条试试。

使用vue-skeleton-webpack-plugin、nprogress搭建骨架屏

首先安装插件

npm install --save nprogress
npm i vue-skeleton-webpack-plugin

对于nprogress其他使用属性，可以在链接查看；在项目中使用方法，在route里面加入钩子函数或者在main.js也可以，这样在页面加载刷新时可以起到用户视觉上的友好展示：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})

在使用vue-skeleton-webpack-plugin插件的时候，我的项目是vue-cli2，所以和vue-cli3目录结构不太相同，但是大致都是一样套路的；

首页在build里面创建一个webpack.skeleton.conf.js文件，主要配置的是vue-skeleton-webpack-plugin里面的内容

'use strict';
 
const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
var ExtractTextPlugin = require("extract-text-webpack-plugin")
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
let skeletonWebpackConfig = merge(ba