骨架屏了解一二

感觉现在许多应用和网站都开始用骨架屏了，于是赶紧了解一下！

骨架屏实现的方式

目前我了解到的骨架屏实现方式，可以归纳为两种：

1. 组件级别手动调用
2. 通过webpack自动注入到首页

组件手动调用

这种方法比较简单通用，适用各种mvvm框架。
具体的实现方式还可以细分：

1. 用ui调好的图片，简单快捷，缺点是不好修改
2. 直接写各种组件，用组件的方法调用，缺点是：嗯，还得多写一些代码

优缺点

优点：骨架屏隐藏的时机方便控制；支持组件间的调用。
缺点：要手写大量代码(ui图的除外)，不够自动化，太low；同时没有解决网速慢时的白屏问题

webpack自动注入

这种方法不怎么通用，因为要熟悉webpack才能自己造*，由于本人现在还不怎么熟悉webpack，就不说出来误导别人了。
不过也有一些第三方的webpack插件，以vue为例，目前我只用过：vue-skeleton-webpack-plugin, page-skeleton-webpack-plugin.
我推荐使用page-skeleton-webpack-plugin，因为它是自动生成骨架屏文件的，根本不需要手写样式！

优缺点

优点：自动化，容易修改，高大上；能够很好减少白屏时间，因为它在打包的时候，就自动把骨架屏的css样式注入到head里面了，能够更快的加载显示，然后等其他的js和css文件加载完成后就自动替换。
缺点：由于是自动替换内容的，所以不好控制隐藏的时机，可能出现的问题就是骨架屏隐藏了，如果页面内容是通过ajax请求的话，还是会有白屏时间；不支持组件内的调用。

好了，说了那么多，下次我会结合这两种方式，给出一个在vue下比较好的使用方案，能用但不保证优雅