vue.js - vue SPA 首屏加载慢

问题描述

问 题

1,描述：基于vue2+vue-router的单页面应用，电脑浏览器访问时，加载vendor.xxxxx.js大约需要5s左右（大小为500+kb）。而移动端（安卓）webview中访问，app.xxxxx.js加载大约需要6s以上（大小10kb以内）。以上都是指首屏访问时间，除了首屏以外其它页面加载很快。
2，已经做的操作（1）：路由已经做了懒加载，图片也做了懒加载。以上数据是谷歌浏览器检测的，安卓的则是控制台打印的.
3，已经做的操作（2）：百度谷歌都尝试搜索了一下，没有太多收获。（因为我是菜鸟。）
4，希望得到的答案：
（1），如何减小打包后的文件大小（特别是vendor）。
（2），首屏加载时间优化。
（3），服务端渲染的新手教程？！
5，蟹蟹！！！
6，测试了一下，部署到不同服务器上，时间也不同！
这是服务器1（联通的网，下行速度2M，上行速度1M），用了3s左右：

这是服务器2（阿里云的ESC,电信1M的网）用了6s不到：

实际测试了好多次，服务器1速度有时快有时慢，快的时候2s多，慢的时候也4s多近5s，服务器2则是稳定在5.5s左右。我也是菜鸟不懂那么多，瞎琢磨。
7，去看了一下Vue官方文档中的服务端渲染，新手表示办不到啊！

解决方案

安卓中webview加载慢和手机配置有关系！之前测试的手机配置很低，具体型号都说不出的那种安卓机，现在改用较新一点的手机测试，速度有明显提升，之前6s+，现在提升了大约一半。
可能是因为换了服务器吧，PC端也快了少许（安卓的测试是在还服务器之前）。
所以，总结一下：只要代码处理没多大问题，其次要考虑的是服务器（网速什么的）和配置（安卓要考虑，ios的webview似乎很强大。）问题。

这篇关于vue.js - vue SPA 首屏加载慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！