Vue如何优化首页加载

首页白屏原因

主要原因是单页应用,加载资源过慢,需要将所有需要的资源都下载到浏览器端并解析。单页面应用的html是靠js生成,因为首屏需要加载很大的js文件(app.ja vendor.js),所以当网速差的时候会产生定程度的白屏。

首屏优化方法

1,在路由返回内容前添加loading(骨架屏)
vue-server-renderer
yue-skeleton-webpack-plugin
page-skeleton-webpack-plugin

2,使用首屏SSR +跳转SPA方式来优化
3,改单页应用为多页应用,使用quicklink(单页面配合路由)技术
4,协议优化(B站前端铁蛋儿)
5,使用web worke
6,第三方资源使用cdn
7,优化webpackp配置webpack的code-split结合vue-router做懒加载wepack的contenthash模式,针对文件级别更改做缓存
8,图片使用webp、小图采用base64编码、雪碧图等