前言
最近频频看到了骨架屏
这个词,其实在这之前鲜少听过骨架屏
这个词。只是平时在浏览网站时,会经常看到某个页面在尚未获取到真正数据时展示的一些占位图形
。
那实际上这个就是前面所描述的骨架屏
,即在页面数据尚未加载前先给用户展示出页面的大致结构,在获取到数据以后在具体展示页面的内容。那骨架屏
相较于传统的那种loading
,在很大程度上提升了用户体验
。
所以今天这篇文章就是一篇骨架屏的初探与实践
,内容本身非常简单
,但是其中还是会有一些细节的东西需要注意,否则在实践实总是无法出现正常的结果。
page-skeleton-webpack-plugin
page-skeleton-webpack-plugin
是饿了么
团队开发的一款webpack
插件,这个插件
可以根据不同的页面生成不同的骨架屏页面。
那接下来就在项目中实践一下page-skeleton-webpack-plugin
。
项目简介
本次的项目是使用vue-cli2
生成的一个项目,项目中组件的内容也非常的简单,可以 戳这里
获取项目代码。
page-skeleton-webpack-plugin安装
安装page-skeleton
也非常简单,直接执行命令:npm install --save-dev page-skeleton-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: path.resolve(__dirname, '../shell'), // the path to store shell file
staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
routes: ['/', '/home'], // Which routes you want to generate skeleton screen
})
]
SkeletonPlugin
插件必选的三个配置项分别为:pathname
、staticDir
、routes
,这三个配置项的作用分别如下:
pathname | String | 开发环境中点击保存按钮生成的骨架屏代码的保存路径 |
staticDir | String | 打包时生成的骨架屏的静态资源文件(官方文档指导要和webpack 打包输出目录一致) |
routes | Array | 需要生成骨架屏的路由(和项目中路由配置 的path 一致) |
运行项目
开发环境中的webpack
配置完成以后,使用npm run dev
运行项目。
不过不幸的是出现了错误 。
跟随着错误信息,去查看了/skeleton-screen-demo/node_modules/page-skeleton-webpack-plugin/src/util/index.js
文件,发现该文件中确实有引入一个名为webpack-log
的模块,所以解决办法就是安装webpack-log
: npm install webpack-log --save-dev
。
安装成功后重新运行项目。
可以发现项目名已经启动成功,页面也能正常访问。
此时如果在控制台
能看到下面这样一个打印信息就证明page-skeleton-webpack-plugin
配置成功。
生成骨架屏文件
首先在控制台输入toggleBar
,然后点击回车。
可以看到页面最上方出现了一个横条
,点击
这个横条
开始生成骨架屏的预览页面
。
可以看到我们页面的骨架屏
的预览效果
已经出来了;在预览页面
的第三栏,还可以对已经生成的代码进行修改。
接着呢,点击骨架屏预览页面
右上角的按钮
,就可以将骨架屏代码
保存在webpack
中配置的目录下。
点击保存按钮
后,可以看到本地已经生成了对应的骨架屏代码文件
。
生产环境中的骨架屏配置
上面的一系列操作都是在开发环境
中进行实践的,目的是为了生成骨架屏
的代码。那现在就需要将骨架屏
应用到生产环境
中。
webpack配置
首先,我们需要在生产环境
中写入骨架屏
的配置。
// 代码位置:/skeleton-screen-demo/build/webpack.pro.conf.js
// 步骤1:引入骨架屏模块
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
// 省略代码...
plugins: [
// 省略其他插件的配置代码...
// 步骤2:在插件中进行配置
new SkeletonPlugin({
pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
routes: ['/', '/home'], // Which routes you want to generate skeleton screen
})
]
模板文件配置
在项目的跟模板
中添加注释<!-- shell -->
。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>骨架屏初探</title>
</head>
<body>
<div id="app">
<!-- shell -->
</div>
<!-- built files will be auto injected -->
</body>
</html>
打包编译项目
接着对项目进行打包编译。
部署项目查看结果
最后一步就是将项目进行部署
,本次我用的是nginx
部署项目。项目部署成功以后我们打开浏览器就能看到骨架屏
的效果。
多页面骨架屏生成
多页面骨架屏
的生成也非常的简单,除了新建组件
、配置路由
之外,还需要对SkeletonPlugin
进行配置。
new SkeletonPlugin({
pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
routes: ['/', '/test'], // Which routes you want to generate skeleton screen
})
在SkeletonPlugin.routes
中添加新的路由
,之后在骨架屏
的预览界面就可以切换新增的路由,生成新的骨架屏预览界面。
生成之后需要点击保存按钮
保存骨架屏代码。
保存之后会在本地生成一个新的骨架屏
代码。
之后在进行打包部署即可。
注意注意
这里特别特别注意
的是,page-skeleton-webpack-plugin
的骨架屏预览界面中有一个Routes按钮
用于切换路由
生成不同页面的骨架屏预览
。
可以看到点击切换按钮
后显示的这个路由
是不带#
符号的,而我们在配置路由时是默认的hash
模式,所以在浏览器
中访问两个组件的完整url
为:
http://localhost:8080/#/
http://localhost:8080/#/test
那这样的不同导致在新增了test
路由以后,我在预览界面切换到了/test
路由的时候,预览界面依然生成的是/
路由的骨架屏页面。
这个问题出现的原因其实需要追溯到page-skeleton-webpack-plugin
的实现,当我们在预览页面切换路由时,page-skeleton-webpack-plugin
插件会根据我们选择的路由
去获取该路由
对应的组件的内容
,然后根据组件的内容
生成骨架屏页面
。
由于page-skeleton-webpack-plugin
的路由是不带#
符号的history
模式,而实际项目中的路由模式是hash
模式,所以导致SkeletonPlugin
匹配不到实际的组件
,也就无法正确的生成骨架屏。
那对于这个问题的解决办法也非常的简单,就是将项目的路由设置为history
模式。
// 代码位置:/skeleton-screen-demo/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'Test',
component: Test
}
]
})
最后我们在来看一下多页面骨架屏的效果。
最后
到这里,这篇骨架屏的初探就完成了,内容非常的简单,但是也有一两个小小的坑需要避过才能完美实现骨架屏的效果。
关于
作者
小土豆biubiubiu
博客园
https://www.cnblogs.com/HouJiao/
掘金
https://juejin.im/user/2436173500265335
微信公众号
土豆妈的碎碎念
作者寄语
小小总结,欢迎大家指导~