vue骨架屏vue-skeleton-webpack-plugin

这是一个基于 Vue 的 webpack 插件，为单页/多页应用生成骨架屏 skeleton，减少白屏时间，在页面完全渲染之前提升用户感知体验。

1安装

npm install vue-skeleton-webpack-plugin

2在 webpack 中引入插件

const path = require('path');
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

plugins: [
    new SkeletonWebpackPlugin({
        webpackConfig: {
            entry: {
                app: resolve('./src/entry-skeleton.js')
            }
        }
    })
]

3创建骨架屏组件 src/skeleton.vue

4创建骨架屏组件的入口文件src/entry-skeleton.js

import Vue from 'vue'
// 创建的骨架屏 Vue 实例
import skeleton from './skeleton';
export default new Vue({
    components: {
        skeleton
    },
    template: ''
});