美文网首页Vue生态圈Vue.js
vue 首页白屏问题

vue 首页白屏问题

作者: 知足常乐晨 | 来源:发表于2019-12-18 15:40 被阅读0次

vue 首页白屏问题
VUE首页加载过慢,其原因是因为它是一个单页应用,需要将所有需要的资源都下载到浏览器端并解析。

原因

首页需要加载比较大的js文件, 解决方法是 在路由返回前添加loading
这类问题不仅是vue。因为是spa,而且所有的渲染都在脚本上,js执行需要时间。另外加载js也要时间,所以页面越大,加载时间越长,而且js执行的时间也长,dcl发生的时间点就更晚,所以会白屏

单页面应用的 html 是靠 js 生成,因为首屏需要加载很大的js文件(app.js vendor.js),所以当网速差的时候会产生一定程度的白屏

解决办法:

优化 webpack 减少模块打包体积,code-split 按需加载
服务端渲染,在服务端事先拼装好首页所需的 html
首页加 loading 或 骨架屏 (仅仅是优化体验)
服务端开启gzip压缩
打包文件分包,提取公共文件包

相关文章

网友评论

    本文标题:vue 首页白屏问题

    本文链接:https://www.haomeiwen.com/subject/acwhuctx.html