如何对 Vue 首屏加载实现优化 ?
首屏加载优化是对于 SPA 来说的 ,首次加载所有的 html css js 所需的文件 ,后面就不会因为用户对页面的操作而跳转页面 ,没有跳转页面如何展示不同的内容呢 ?
使用 Vue 的路由机制 ,实现不同内容的展示 ;
SPA 的优点 :
1. 页面切换速度快
2. 页面内容的改变,不需要重新加载整个页面,避免了非必要的加载,节约浏览器资源 ;
SPA的缺点:
1. 首次加载消耗大 ,因为 需要加载所有所需的 html css js 文件 首屏加载时间长
2. 因为所有的内容都在一个页面(只有一个html文件),所以 SEO 存在天然的弱势
首屏加载是用户体验最重要的环节 , 如何解决首次加载消耗大,即优化首屏加载 ;
1. 使用CDN 引入组件库 -------------------- 不推荐,因为依赖第三方服务器存在不确定性(服务器可能崩溃),存在安全隐患
2. 使用 VueRouter 的懒加载 --------------------- 路由的懒加载实际上也是按需加载的一种
3. 首页单独做服务器的渲染
4. 不要生成map文件
5. 使用组件库的时候最好按需引入