vue 首屏优化加载（一）（懒加载）

# 路由懒加载（按需加载）

已经懒加载的路由：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('@/components/index'),
      redirect: 'home',  // 重定向到home组件
      children: [
        {
          path: 'home',
          component: () => import('@/components/indexs/home')
        }
      ]
    },

  ]
})

没有懒加载的路由

import Vue from 'vue'
import Router from 'vue-router'

import index from '@/components/index'
import home from '@/components/indexs/home'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      redirect: 'home',  // 重定向到home组件
      children: [
        {
          path: 'home',
          component: home,
        }
      ]
    },

  ]
})

嵌套路由的 path 不要出现 “ / ”

作用：组件按需加载，减少首屏加载时间。

参考官方链接：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97