摘要：
最近做网页优化，发现页面会有一段白屏时间，给人的体验就是网页会有一闪而出的感觉，也就是我们常说的闪屏，查了一些资料，发现实现思路都是异曲同工的，就是在页面节点还没加载之前，先插一段静态网页，节点加载了再去掉这段静态代码，显示数据渲染出来界面。一般需要加骨架屏的界面，是一些动态加载数据的界面，因为数据没出来，会有一段比较长的白屏时间会给用户网加载慢的感觉。加了骨架屏，用会觉得网页加载比较快，属于一种视觉欺骗的手段吧。

下面来讲讲 vue-cli3 添骨架屏方法。

为节省时间成本，我没有自己去造轮子，而是选择了一个现成的轮子 vue-skeleton-webpack-plugin，骨架屏的实现步骤如下：

1、安装轮子的包：yarn add vue-skeleton-webpack-plugin

2、webpack 中引入该插件(vue.config.js)，具体的配置项可以去看看该插件的说明：

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

configureWebpack: {
  plugins: [
    new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/common/skeleton.js'),
        },
      },
      minimize: true,
      quiet: true,
      router: {
        mode: 'hash',
        routes: [
          {
            path: '/',
            skeletonId: 'skeleton-home',
          },
          {
            path: '/home',
            skeletonId: 'skeleton-home',
          },
        ],
      },
    }),
  ],
},

3、添加一个骨架组件，skeleton.js 中引入

import Vue from "vue";
import Skeleton from "../components/skeletonPage.vue";

export default new Vue({
  components: {
    Skeleton
  },
  render: h => h(Skeleton)
});

4、因为在 vue-cli 里默认样式是不分离的，打包出来的骨架屏会没有样式，所以需要设置一下样式分离：

css: {
  extract: true,
},

5、因为 vue-cli 脚手架打包出来的样式是带 tag 的，骨架的样式依然不可用，这里我是先启用样式分离，编译出 css ，然后手动去掉 tag，放到 public/index 里，再关闭样式分离，这样骨架屏就正常了。

6、按照文档做了上面这些，会发现骨架屏还是无效的，还需要修改一下 main.js 的组件挂载方式

const app = new Vue({
  router,
  components: {
    App
  },
  render: h => h(App)
});

window.mountApp = () => {
  app.$mount("#app");
};

window.mountApp();

7、此外需要注意：

  • App.vue 文件引用组件的方式不要用 router-view，改用直接引入组件

  • 首屏的组件不要懒加载，不然会有闪屏的问题

  • 目前只测试了单页应用，多页面的应用还未尝试，有待探索