码迷,mamicode.com
首页 > 其他好文 > 详细

骨架屏的实现与总结

时间:2018-07-09 00:02:53      阅读:2954      评论:0      收藏:0      [点我收藏+]

标签:全局   ejs   src   经验   体验   pac   install   图片   前端   

原文地址: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模式
刷新

 

骨架屏的实现与总结

标签:全局   ejs   src   经验   体验   pac   install   图片   前端   

原文地址:https://www.cnblogs.com/tzzf/p/9281796.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!