骨架屏的实现与总结

原文地址:https://segmentfault.com/a/1190000014832185

  spa页面首屏加载速度没加ssr优化很慢,需要用户等待,这时前端如果这个首屏预加载可以提高用户体验,于是等着这个教程体验了一番,下面说说自己在其中的经验。

首先,说下其实骨架屏也是ssr的一种体现,也是基于vue-server-renderer包实现的,可以了解它的文档。在文档中也介绍了了(这也是骨架屏的必要因素),就是骨架屏的实现的对npm包的有严格要求,这是重中之重,必须检查你的npm包的版本。

第二点,你在实现骨架屏注入的前置条件还有一个就是必须全局安装webpack webpack-cli。

mac用户在安装的时候必须给权限安装

sudo -s  输入密码
npm install webpack -g

第三点:骨架屏的场景应用不同,需要修改骨架屏样式时不能注释,而是应该删除,因为在打包的时候会出错。

我实现成功后,就把这个技术放到了我的博客上了,体验方法如下:

清空浏览器缓存
将浏览器模式调至slow 3G模式
刷新

猜你喜欢

转载自www.cnblogs.com/tzzf/p/9281796.html