共计 1749 个字符，预计需要花费 5 分钟才能阅读完成。
给项目加一个骨架屏吧
骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。
安装
这里采用饿了么开源的方案 page-skeleton-webpack-plugin。
npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin安装过程中报错提示如下
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.执行这个命令
npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org使用
我这个项目是基于 vue-cli3 脚手架开发的。
第一步配置插件
创建一个 vue.config.js 文件。
const {SkeletonPlugin} = require('page-skeleton-webpack-plugin')
const path = require('path')
module.exports = {
configureWebpack: {
plugins: [
new SkeletonPlugin({pathname: path.resolve(__dirname, './shell'), // 用来存储 shell 文件的地址
staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
routes: ['/'], // 将需要生成骨架屏的路由添加到数组中
excludes: ['.van-nav-bar', '.van-tabbar'] // 需要忽略的 css 选择器
})
],
},
chainWebpack: (config) => { // 解决 vue-cli3 脚手架创建的项目压缩 html 干掉 <!-- shell --> 导致骨架屏不生效
if (process.env.NODE_ENV !== 'development') {config.plugin('html').tap(opts => {opts[0].minify.removeComments = false
return opts
})
}
},
};在项目根目录下面创建一个 shell 文件夹。
chainWebpack 配置 这个是解决 vue-cli3 打包的骨架屏不生效的 BUG
第二步修改 HTML Webpack Plugin 插件的模板
在你启动 App 的根元素内部添加 <!– shell –>
<body>
<div id="app"><!-- shell --></div>
<!-- built files will be auto injected -->
</body>第三步：界面操作生成、写入骨架页面
- 在开发页面中通过 Ctrl|Cmd + enter 呼出插件交互界面，或者在在浏览器的 JavaScript 控制台内输入 toggleBar 呼出交互界面。
- 点击交互界面中的按钮，进行骨架页面的预览，这一过程可能会花费 20s 左右时间，当插件准备好骨架页面后，会自动通过浏览器打开预览页面
- 扫描预览页面中的二维码，可在手机端预览骨架页面，可以在预览页面直接编辑源码，通过点击右上角写入按钮，将骨架页面写入到 shell 文件夹中。
- 通过 webpack 重新打包应用，当页面重新启动后，就能够在获取到数据前看到应用的骨架结构了。
最终效果
demo 地址
https://vbook.langpz.com
我的博客和 GitHub 地址
https://github.com/lanpangzhi
http://blog.langpz.com
参考
https://github.com/cnpm/cnpmjs.org/issues/1246
https://github.com/ElemeFE/page-skeleton-webpack-plugin
正文完
发表至： javascript
2019-06-13
