vue-cli简单实现骨架屏

Vue项目首屏加载缓慢，基于webpack插件（vue-skeleton-webpack-plugin）实现一个骨架屏，给用户创造一个正在加载的过程

本次环境：
node:     10.15.3
vue:     2.5.2
vue-skeleton-webpack-plugin:     1.2.2

1、项目添加vue-skeleton-webpack-plugin插件

cnpm install vue-skeleton-webpack-plugin

2、新建骨架文件Skeleton.vue

在src目录下新建Skeleton.vue，根据业务需求编写少量代码，图片尽量使用base64

3、创建一个使用骨架组件的入口文件entry-skeleton.js

同样在src目录下新建entry-skeleton.js，把骨架组件引入vue中

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

4、创建一个用于服务端渲染的 webpack 配置对象，并将入口文件指定为 entry 依赖入口

在build 目录下创建 webpack.skeleton.conf.js

const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
module.exports = 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: []
})

5、引入这个webpack 配置对象

在webpack.dev.conf.js和webpack.prod.conf.js分别引入webpack.skeleton.conf.js

plugins: [
    new SkeletonWebpackPlugin({
        webpackConfig: require('./webpack.skeleton.conf')
    })
]

现在已经可以在浏览器查看效果了

效果图