Vue - router 懒加载

路由的懒加载

• 打包构建应用时，Javascript 包会变得很大，影响页面加载
• 将不同路由对应的组件分割为不同的代码块，当路由被访问时才加载对应的组件，提高了效率

问题描述

1. 路由最后被打包放在js文件中
2. 多个页面放在一个js文件中，导致此页面非常大
3. 一次性从服务器请求此页面，需花费一定时间，用户电脑甚至会出现短暂空白
4. 为避免以上情况，可使用路由懒加载

懒加载3种方式

懒加载代码片段

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

// import HelloWorld from '@/components/HelloWorld'
// import User from '@/components/User'

const HelloWorld = () => import('@/components/HelloWorld') // router 懒加载模式
const User = () => import('@/components/User') // router 懒加载模式

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '',
      redirect: "HelloWorld"
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user/:pathUserId',
      component: User
    }
  ],
  mode: 'history' // xxx/#/user -> xxx/user
})