主要介绍了基于 vue-skeleton-webpack-plugin 的骨架屏实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言 目前正在做的项目，登录是需要跳转到别人的页面的，导致重定向很多，需要优化一下白屏时间，所以就用到了骨架屏，但是这次用的骨架屏不是自动生成的，还是自己敲的样式，一步步来吧，先从简单的用起 。 先上效果图：   什么是骨架屏 骨架屏，英文 Skeleton screen ，是指在页面开始渲染之前的白屏时间内，先让用户看到即将要展现页面的“骨架”，页面渲染完成之后再将它替换掉，起到一个从 白屏 → 渲染完成 过程中的过渡作用，它可以有效减少用户的感知时间，让用户“感觉上”认为打开页面比较快（相比

关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。 这里主要通过代码为大家展示如何一步步做出这样一个骨架屏： prerender 渲染骨架屏 本组件库骨架屏的实现也是基于预渲染去实现的，有关于预渲染更详细的介绍请参考这篇文章：处理 Vue 单页面 Meta SEO的另一种思路 下面我们主要介绍其实现步骤，首

1、骨架屏原理 骨架屏其实就是在数据加载到id为app的div之前，先放置一个显示，可以是代码亦可以是文字图片等，数据加载之后会覆盖显示 优势：首页加载慢会导致白屏、卡顿问题，骨架屏优化用户体验 2、结合webpack自定义插件，实现自定义骨架屏 步骤： （1）在build目录新建一个js文件，作为自定义组件（代码在最后） （2）在配置文件webpack.prod.config.js中注册引入 const MyPlugin = require('./MyPlugins') （3）在配置文件we

脚手架不说了,提前搭建好 然后安装 vue-skeleton-webpack-plugin npm install vue-skeleton-webpack-plugin 创建文件 skeleton.js和skeleton.vue skeleton.js import Vue from 'vue' import Skeleton from './Skeleton.vue' export default new Vue({ components: { Skeleton }, template