流浪のwolf

卷帝

导航

如何对 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. 使用组件库的时候最好按需引入 

posted on 2022-11-08 21:44  流浪のwolf  阅读(406)  评论(0编辑  收藏  举报