![a9d1cd3886157d72ebf8b92a846b8f1d.png](https://i-blog.csdnimg.cn/blog_migrate/a618f7a948e54f693f3d9f03e1d9364d.png)
前言
最近频频看到了骨架屏
这个词,其实在这之前鲜少听过骨架屏
这个词。只是平时在浏览网站时,会经常看到某个页面在尚未获取到真正数据时展示的一些占位图形
。
![0d5854fe5378a43095faedd9aae9bd91.png](https://i-blog.csdnimg.cn/blog_migrate/8564ecd5d3d9e48c45cf88ab6eee7859.jpeg)
那实际上这个就是前面所描述的骨架屏
,即在页面数据尚未加载前先给用户展示出页面的大致结构,在获取到数据以后在具体展示页面的内容。那骨架屏
相较于传统的那种loading
,在很大程度上提升了用户体验
。
所以今天这篇文章就是一篇骨架屏的初探与实践
,内容本身非常简单
,但是其中还是会有一些细节的东西需要注意,否则在实践时总是无法出现正常的结果。
PSWP
page-skeleton-webpack-plugin
是饿了么
团队开发的一款webpack
插件,这个插件
可以根据不同的页面生成不同的骨架屏页面。
那接下来就在项目中实践一下page-skeleton-webpack-plugin
。
PSWP
是page-skeleton-webpack-plugin
的简称,在后续的描述中两者表达的是同一个东西。
项目简介
本次的项目是使用vue-cli2
生成的一个项目,项目中组件的内容也非常的简单,可以 戳这里
获取项目代码。
PSWP安装
安装page-skeleton
也非常简单,直接执行命令:npm install --save-dev page-skeleton-webpack-plugin
即可。
![c7f5df1df5d343c811d634146a8599c2.png](https://i-blog.csdnimg.cn/blog_migrate/8e9146940002979fc6c53e27952368e2.png)
注意
文档
中有明确说明还要安装html-webpack-plugin
,本项目已经安装了html-webpack-plugin
。如果你的项目中没有安装html-webpack-plugin
,可以执行npm install --save-dev html-webpack-plugin
进行安装。
接下来就需要开始实践了。
webpack配置
首先是需要我们在开发环境
中生成骨架屏
的代码。
所以第一步是在开发环境
中配置SkeletonPlugin
。
// 代码位置:/skeleton-screen-demo/build/webpack.dev.conf.js
// 步骤1:引入骨架屏模块
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
// 省略代码...
plugins: [
// 省略其他插件的配置代码...
// 步骤2:在插件中进行配置
new SkeletonPlugin({
pathname: pat