vue首屏加载优化（路由懒加载）

vue首屏加载过慢问题

• 首屏加载过慢原因：

  vue进行的是单页面开发，第一次加载页面时会一次性几乎把所有的组件数据下载完毕，导致加载时间过长，出现白屏停留时间过长的情况，也就是首屏加载过慢问题。

• 解决办法：

  • 路由懒加载

  • ui 框架按需加载

  • gzip 压缩

一、路由懒加载

• 官方描述：

  当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

• 代码实现：

  • 改进之前：

    //先引入
    import Center from '../components/font/personCenter/Center'
    //后使用
    name: 'centerPage',
    path: '/centerPage',
    component: Center,
    meta: {
        title: '个人中心',
        isGuard: true
    },

  • 改进后

    name: 'centerPage',
    path: '/centerPage',
    component: () => import('@/components/font/personCenter/Center'),
    meta: {
        title: '个人中心',
        isGuard: true
    },

• 直观感受：

  通过这个简单的改造，确实是在重新启动页面时做到了和正常pc端时的需要点击进入某个页面，浏览器才会下载对应的资源。