正常引入方式：

// 匯入Vue
import Vue from 'vue'
// 匯入路由
import Router from 'vue-router'
// 匯入登入元件
import Login from '@/components/login/Login'
// 匯入Home元件
import Home from '@/components/home/Home'
// 安裝路由外掛
Vue.use(Router)
// 建立路由物件，配置路由規則
const router = new Router({
  routers: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home
    },
  ]
})
 

1 vue非同步元件技術

在大型應用中，我們可能需要將應用分割成小一些的程式碼塊，並且只在需要的時候才從伺服器載入一個模組。為了簡化，Vue 允許你以一個工廠函式的方式定義你的元件，這個工廠函式會非同步解析你的元件定義。Vue 只有在這個元件需要被渲染的時候才會觸發該工廠函式，且會把結果快取起來供未來重渲染

相關程式碼：

const router = new Router({
   routers: [
    {
      path: '/login',
      component: (resolve) => { require(['@/components/login/Login'], resolve)}
    },
    {
      path: '/home',
      component: (resolve) => { require(['@/components/home/Home'], resolve)}
    }
  ]
})
 

2 路由懶載入（官方：把元件按組分塊）

每個 () => import() 都會生成一個獨立的JS檔案
也就是說：只要使用這個語法，就是告訴 webpack 這就是一個程式碼分割點，這樣生成一個獨立的js檔案，來實現按需載入的功能

相關程式碼：

// 無需import匯入元件
const Login = () => import(/* webpackChunkName: 'login' */ '@/components/login/Login')
const Home = () => import(/* webpackChunkName: 'home' */ '@/components/home/Home')
// 建立路由物件，配置路由規則
const router = new Router({
  routers: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home
    },
  ]
})
 

說明：webpackChunkName 相同，那麼，這兩個元件會被打包生產一個JS檔案

const Goods = () => import(/* webpackChunkName: 'goods' */'@/components/goods')
const GoodsAdd = () => import(/* webpackChunkName: 'goods' */'@/components/goods-add')

3 webpack提供的require.ensure()

require.ensure（）的語法：

require.ensure（dependencies：String []，callback：function（require），errorCallback：function（error），chunkName：String）

const router = new Router({
  routers: [
    {
      path: '/login',
      component: r => require.ensure([], () => r(require('@/components/login/Login')), 'login')
    },
    {
      path: '/home',
      component: r => require.ensure([], () => r(require('@/components/home/Home')), 'home')
    },
  ]
})