基于ssh框架的网站开发流程,汕头发展,备案核验单 网站类型,公众号 微网站开发vue-cli项目首页加载缓慢想要使用骨架屏效果#xff0c;经过几天的踩坑#xff0c;这里学习并记录一下vue项目自动生成骨架屏方法。 添加骨架屏#xff0c;其优势在于#xff1a;
写于HTML文件中#xff0c;独立于Vue框架#xff0c;节省了JS加载时间JS全局环境创建的执…vue-cli项目首页加载缓慢想要使用骨架屏效果经过几天的踩坑这里学习并记录一下vue项目自动生成骨架屏方法。 添加骨架屏其优势在于
写于HTML文件中独立于Vue框架节省了JS加载时间JS全局环境创建的执行时间的时间只在主页面根据页面结构独立编写预先展示页面结构进行视觉暂留提供更好的交互感官只在页面结构变化时进行修改维护成本相对较低
骨架屏的作用主要是在网络请求较慢时提供基础占位当数据加载完成恢复数据展示。这样给用户一种很自然的过渡不会造成页面长时间白屏或者闪烁等情况。 常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。 那么重点就是怎么添加骨架屏 了 大概方案有
手动编写骨架屏代码通过预渲染手动书写的代码生成相应的骨架屏 比如vue-skeleton-webpack-plugin饿了么内部的生成骨架页面的工具 page-skeleton-webpack-pluginJavaScript操作DOM 的方式结合 Puppeteer 自动生成网页骨架屏其他...上述方案分析
1、手动编写骨架屏代码
该方法就是手动编写项目index.html 入口文件实现在vue项目初始化展示替换div#app根元素前的骨架屏效果。 2、通过预渲染手动书写的代码生成相应的骨架屏 vue-skeleton-webpack-plugin
该方法需要下载使用vue-skeleton-webpack-plugin主要原理是利用vue-server-renderer 将 .vue格式的骨架屏文件处理成html和css字符串的功能进而完成骨架屏的注入但是需要手动编写预渲染的骨架屏效果图代码 亲测注意以下出错场景
【webpack --config ./webpack.skeleton.conf.js】报错可以尝试将webpack版本从4.0降到3.0vue-loader15.*之后 必须配置带有VueLoaderPlugin 之外还需另外单独配置css-loader。如果你不想手动设置 webpack我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置做到开箱即用。错误未安装webpck-cli使用命令全局安装【npm install -g webpack-cli】即可项目报错可能是需要安装 css-loader style-loader如果提示在webpack.config中未配置mode环境选项配置即可为保持构建环境一致请采用npm run dev脚本编译的形式以确保使用的webpack命令vue-loader是本地版本。详细使用参考网址https://segmentfault.com/a/1190000014832185 使用步骤归纳
1、安装vue-skeleton-webpack-plugin插件
2、在/src目录下新建一个Skeleton.vue文件即已编写好的预渲染页面
3、文件同级目录再新建一个skeleton.entry.js入口文件其中引用了Skeleton.vue文件
4、在项目根目录新建一个webpack.skeleton.conf.js配置文件以专门用来进行骨架屏的构建。该文件中包含skeleton.entry.js入口文件引用VueSSRServerPlugin插件指定了其输出的json文件名
5、使用【webpack --config ./webpack.skeleton.conf.js】命令在/dist目录下生成一个skeleton.json文件
6、再在根目录下新建一个skeleton.js该文件用于读取skeleton.json往index.html内插入骨架屏内容。
7、入口index.html文件需要在被写入内容的位置添加!--vue-ssr-outlet--占位符本例子在div#app里写入
8、运行node skeleton.js就可以完成骨架屏的注入了 前两个方法的局限性是都需要开发者自己编写骨架屏代码并没有自动根据vue页面内容转换成相应色块组成的dom片段再注入入口html文件所以使用该种方法开发效率低麻烦不能完全解决根据vue项目页面自动生成骨架屏dom并注入入口html替代#app节点的问题 3、饿了么内部的生成骨架页面的工具 page-skeleton-webpack-plugin 饿了么的做的比较强大了还有 UI 界面专门调整骨架屏
对于复杂的页面也会有不尽如人意的地方生成的骨架屏节点是基于页面本身的结构和 CSS存在嵌套比较深的情况体积不会太小只支持 history 模式.
这个不多说没有亲测饿了吗骨架屏方案思路 https://github.com/Jocs/jocs.github.io/issues/22 4、JavaScript操作DOM 的方式结合 Puppeteer 自动生成网页骨架屏
该方法需要下载【npm i draw-page-structure -g】 用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏原理是 生成操作Dom的JavaScript脚本该脚本用于将项目页面转换成色块形式的骨架屏效果 通过Puppeteer控制谷歌浏览器运行项目页面并获取页面、将上一步的脚本注入该页面并生成骨架屏所需的Dom节点 将自动生成的骨架屏Dom片段插入到应用页面的根入口节点。使用注意事项
核心在于 DOM 操作puppeteer 仅提供运行环境和导出方式只要能访问的页面都能生成history 与 hash 模式无限制不受项目和框架的限制vue 和 react 等项目零修改即可复用生成色块的单位为百分比不同设备自适应不需要 css-tree 来提取样式不依赖页面本身的布局结构生成扁平的 DOM 节点体积特别小支持自定义生成方式与导出方式
详细使用参考网址 https://www.imooc.com/article/253387、https://github.com/famanoder/dps dps插件使用步骤
1、使用命令【npm i draw-page-structure -g】安装插件
2、dps init 生成配置文件 dps.config.js
3、修改 dps.config.js 进行相关配置包括想渲染的页面url、通过includeElement和init方法调整骨架屏效果等
4、dps start 开始生成骨架屏 参考文章有Vue页面骨架屏注入实践
饿了吗一种自动化生成骨架屏的方案
用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏、
dps(draw-page-structure)插件使用
