vue-cli3使用vue-skeleton-webpack-plugin骨架屏插件

搜索发现有下面两个骨架屏插件（方案）

• page-skeleton-webpack-plugin
• vue-skeleton-webpack-plugin

page-skeleton-webpack-plugin

page-skeleton-webpack-plugin是饿了么团队开发的，但目前好像已经停止维护了，所以入坑需谨慎。这个插件的优点是可以自动生成骨架屏。但是它不支持hash路由，不适用项目，所以采用下面的方案。关于这个插件的使用可以看官方文档，或者参考一下这篇文章

vue-skeleton-webpack-plugin

vue-skeleton-webpack-plugin项目上提供了很多示例，但实际用起来却有很多问题。而且这个插件需要自己实现骨架屏页面。根据项目里的示例（vue-cli3）进行配置。根据issue对不同页面显示不同骨架屏进行了处理。

配置

// skeleton.js
import Vue from 'vue'
import listSkeleton from './skeleton/listSkeleton'
import detailSkeleton from './skeleton/detailSkeleton'

export default new Vue({
  components: {
    listSkeleton,
    detailSkeleton 
  },
  template: `
    

      
      
    
  `
});

// vue.config.js
configureWebpack: {
  plugins: [
    // 骨架屏配置
    new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          index: path.join(__dirname, './src/skeleton.js'),
        },
      },
      minimize: true,
      quiet: true,
      router: {
        mode: 'hash',
        routes: [
          { path: '/', skeletonId: 'listSkeleton' },
          { path: /^\/detail/, skeletonId: 'detailSkeleton' }
        ]
      }
    }),
  ],
},
// 在开发模式下分离css样式，让骨架屏的css在开发模式下生效
css: {
  extract: true
}

其他配置项可以看文档，这里我踩的几个坑：

1. entry入口的名字，示例里写的是app，但我的项目里是index
2. 示例中将main.js做了这样的处理，目的是在css文件加载完成时再挂载Vue，以解决我下面说的白屏问题。具体可以参考项目的issue#62。但是可能是因为项目配置的缘故，找不到window.STYLE_READY，导致骨架屏不消失，最后没改动main.js。

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

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

if (process.env.NODE_ENV === 'production') {
  if (window.STYLE_READY) {
    window.mountApp();
  }
} else {
  window.mountApp();
}

3. 最后是在开发环境css无效的问题，issue中也有提到，需要在开发环境抽离css。下次让设计师小哥给张骨架屏的图好了，就不用写css了。

上述两个插件的原理都是一样的。假设Vue挂载的元素是

，如果我们在这个元素写一些内容，vue未加载完成时就会显示在页面中；当vue挂载时，会删除

内的内容。我们可以通过这个原理实现Vue框架的骨架屏。
但是个人认为这个方案其实有些问题：

1. 无法控制骨架屏消失的时机，如果我希望在首屏加载数据时显示骨架屏，加载完后消失，基于这样的原理很难实现
2. 在Vue挂载到页面显示内容还有一定的白屏时间
3. 无法实现局部骨架屏，在页面上显示局部骨架屏代替loading效果

即使这样，这个方案其实已经使用大多数情况了。对于SPA来说，一般只有首页加载较久，切换“页面”时几乎不需要等待时间，所以我们只需要在首屏加载骨架屏。但我们不知道用户第一次进入的是哪个页面，所以我们需要根据路由判断当前页面，加载不同的骨架屏。

不能自动生成骨架屏是个硬伤，如果页面更新，也要去维护骨架屏。让设计师小哥切个图是个不错的方法，但我们还是要追求自动化。

以后的优化目标应该是

• 自动化生成骨架屏
• 骨架屏动画
• 可以控制骨架屏消失的时机
• 局部骨架屏，代替loading效果

参考文章：

Vue页面骨架屏注入实践
为vue项目添加骨架屏
饿了么的 PWA 升级实践