首屏加载优化有哪些方案

• Vue-Router路由懒加载（利用Webpack的代码切割）
• 使用CDN加速，将通用的库从vendor进行抽离
• Nginx的gzip压缩
• Vue异步组件
• 服务端渲染SSR
• 如果使用了一些UI库，采用按需加载
• Webpack开启gzip压缩
• 如果首屏为登录页，可以做成多入口
• Service Worker缓存文件处理
• 去除非 HTML 页面的静态资源的 cache-control: no-cache 配置，充分利用客户端缓存
• 减少页面加载时的请求数量。
• 减少 Cookie 中保存的信息或去除请求中的非必要 Cookie 信息
• 压缩图片体积（也可尝试更改图片格式，使用同等质量下体积最小的图片）
• 合并小图片为一张大图或将图片转为 base64 编码
• 延迟加载图片
• 移除冗余代码
• 封装公共组件（减少重复代码）
• 预渲染页面框架或骨架图
• 尽量减少 iframe 使用，它会阻塞主页面的渲染; 对所有资源压缩 JavaScript 、 CSS 、字体、图片等，甚至html;
• 使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）