关于SPA首页骨架屏的思考

1. 起因

最近项目使用了umijs,这是很不错的一个懒人框架,集成了很多功能和配置,并且有一个很完善的脚手架,几乎不需要二次配置,开箱即用。但是某一次我打包发现,umijs几乎将所有代码打包成为一个js文件了。这个js一般情况下会上1024k,这对于网络差的传输时很不客观的。于是我将浏览器的速度调成3g,哟吼吼,一片白,就是这么尴尬。虽然后面可以通过code spliting或者异步路由加载可以缩小js代码,但是还是会存在比较大的js-source文件。这对网络差的环境体检简直差。前端工程师嘛,追求一个更优的用户体验,于是我开始思考怎么解决这个问题。

2. 探索

现代主流前端开发都是SPA模式,那么浏览器第一步是加载index.html,然后才下载js文件,我们需要做的就是加载js的时候页面上能够有一个用户等待js的效果。以前可能大部分人会选择一个菊花图loading,但是现在更加流行动态的骨架屏了。
针对骨架屏,antd也是有组件提供的,样式很漂亮,可是它会被打包到js里头,这就达不到我们的要求了。
于是我就将umijs的html模板提取出来,然后加了一个基于antd的骨架屏效果html代码到id为root的div里头。为什么在这个里头?因为js加载完以后,会把我们的项目的相关元素覆盖这个div里头的元素,实现了骨架屏显示完毕以后就展示我们的项目的无缝衔接。而且骨架屏部分代码也不多,index.html加载很快。于是我们有了等待js的时候页面有一个骨架屏的显示,体验上升不少。

3. 提升

现在大部分项目都会有一个token免登陆的情况。是的,有可能路由不同的情况展示的页面不同,写死在模板上面的骨架屏显得多么的惨白无力。那么这个index.html中的骨架屏不能写死,还要再倒腾。
webpack研究还不深入的我开始看webpack官网,去找有没有插件可以解决?htmlPlugin是一个方向。看了很多配置项发现这个插件也不能实现我们想要的效果。没办法,自己学着写一个webpack插件了。代码各位可以去我的github看下吧,我就不多说了。
这个插件可以通过配置来实现针对不同路由选择出现不同的骨架屏。比如说路由为/login时候配置一个登录的骨架屏,/index的时候配置一个首页的骨架屏。那么用户在弱网络下等待js的时候就会有不同的直观体验,用户体验进一步提升。

4. 新问题

于是我把自测成功的插件添加到umijs的配置中,发现!!!监听不到webpackhtmlplugin的生命周期。没办法,根据umijs的插件开发机制自己又开发了一套umi-plugin-的相关插件。最后终于解决了我苦恼的问题。

5. 最后

最后,希望大家用不到我的插件,同时我也开源了我的这两个插件。希望大神们能够指正不足。

1
2
3
npm install spa-simple-skeleton   // 针对普通SPA页面
// 或者
npm install umi-plugin-simple-skeleton // 针对umijs

或者spa,umi。谢谢大家


作者简介: 张栓,人和未来大数据前端工程师,专注于html/css/js的学习与开发。