搜索发现有下面两个骨架屏插件（方案）
- 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: `
<div>
<listSkeleton id="listSkeleton" style="display:none;" />
<detailSkeleton id="detailSkeleton" style="display:none;" />
</div>
`
});
// 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
}
其他配置项可以看文档，这里我踩的几个坑：
- entry入口的名字，示例里写的是app，但我的项目里是index
- 示例中将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();
}
- 最后是在开发环境css无效的问题，issue中也有提到，需要在开发环境抽离css。下次让设计师小哥给张骨架屏的图好了，就不用写css了。
上述两个插件的原理都是一样的。假设Vue挂载的元素是<div id="app"></div>，如果我们在这个元素写一些内容，vue未加载完成时就会显示在页面中；当vue挂载时，会删除<div id="app"></div>内的内容。我们可以通过这个原理实现Vue框架的骨架屏。
但是个人认为这个方案其实有些问题：
- 无法控制骨架屏消失的时机，如果我希望在首屏加载数据时显示骨架屏，加载完后消失，基于这样的原理很难实现
- 在Vue挂载到页面显示内容还有一定的白屏时间
- 无法实现局部骨架屏，在页面上显示局部骨架屏代替loading效果
即使这样，这个方案其实已经使用大多数情况了。对于SPA来说，一般只有首页加载较久，切换“页面”时几乎不需要等待时间，所以我们只需要在首屏加载骨架屏。但我们不知道用户第一次进入的是哪个页面，所以我们需要根据路由判断当前页面，加载不同的骨架屏。
不能自动生成骨架屏是个硬伤，如果页面更新，也要去维护骨架屏。让设计师小哥切个图是个不错的方法，但我们还是要追求自动化。
以后的优化目标应该是
- 自动化生成骨架屏
- 骨架屏动画
- 可以控制骨架屏消失的时机
- 局部骨架屏，代替loading效果
