骨架屏的实现与总结

Posted 2020-12-03 tzzf

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