pwa单页应用的首屏加载优化

接着上篇文章pwa实现后,有些网站对于首次加载速度有着特别的要求,我会聊一下不同要求下的几种解决方案的优缺点,至于很具体的实现这边不做阐述了。

1、SSR

这种方案现在的主要目的其实是seo方面的比较多,但是因为其实服务器端先把要呈现的页面效果返回,然后再加载单页的文件来接手页面,类似快照功能。具体实现可以查看对应技术官网对ssr的文档,vue的实现可以参考这个vue ssr demo,官网示例由于墙的原因运行不起来。
优点:页面的展示效果会比较快呈现
缺点:因为需要服务器去创建快照所以会消耗服务器性能;还有就是代码需要适配前端和后端,还要保持效果一致比较考验功力;页面的交互依然需要等待单页的js加载完成才能操作。

2、cdn

cdn网络加速技术,不需要进行太多改动,网上的cdn服务商也很多。
优点:改动小;对于国际环境引起的效果好;减少服务器带宽
缺点:依赖包可以使用免费的,本身项目如果要用可能需要付费
ps:我这边两个项目使用外链cdn后,一个没问题;一个vue-router会报错,vue-router不使用cdn引入后就好了,不知道什么原因。

3、按需加载

这里我把vue-router的动态懒加载、语言包的按需加载、组件库的按需加载等等都算了进去,把这些都做了后会发现减少体积也很多,尤其是语言包。
优点:界面显示所需文件的大小会明显减小
缺点:后续跳转时加载其他文件交互变慢,这个需要配合预加载等技术来解决,不能减少首次的加载的文件的数量

4、删除预加载

vue打包的时候会把没有用的文件以prefetch、preload预加载的形式注入到html中,在网络比较差的时候多少会影响点显示速度,把这些预加载删除可以加快显示,如果使用了ServiceWorker,它也会有一个预加载需要处理。
优点:首次的加载的文件数量减少,显示自然就加快了
缺点:因为预加载没有,后面的跳转肯定需要等待网络加载文件了

gzip压缩不放在里面是因为我认为gzip这个是必做的。这边是通用建议将公共的依赖包使用免费的cdn,然后把按需加载做好,然后加个loading框就好了,只要不是网络差到极限了都是可以的,如果真的差到极限了再把预加载删除。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章