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