vue 首页白屏问题
VUE首页加载过慢,其原因是因为它是一个单页应用,需要将所有需要的资源都下载到浏览器端并解析。
原因
首页需要加载比较大的js文件, 解决方法是 在路由返回前添加loading
这类问题不仅是vue。因为是spa,而且所有的渲染都在脚本上,js执行需要时间。另外加载js也要时间,所以页面越大,加载时间越长,而且js执行的时间也长,dcl发生的时间点就更晚,所以会白屏
单页面应用的 html 是靠 js 生成,因为首屏需要加载很大的js文件(app.js vendor.js),所以当网速差的时候会产生一定程度的白屏
解决办法:
优化 webpack 减少模块打包体积,code-split 按需加载
服务端渲染,在服务端事先拼装好首页所需的 html
首页加 loading 或 骨架屏 (仅仅是优化体验)
服务端开启gzip压缩
打包文件分包,提取公共文件包