Vue異步組件實現按需加載

當我們訪問我們項目首頁的時候，app.js會被加載，加載完成後，訪問其它頁面app.js文件不會加載，因爲已經加載好放在內存裏了，直接拿來用就好了。因爲app.js存放的是項目中所有頁面的邏輯代碼，所以當我們的項目變大時候，比如app.js大於1MB的時候，項目的加載速度會變慢，這時候推薦使用異步組件按需加載，意思就是訪問這個頁面的時候只加載這個頁面所需要的js文件，訪問另一個頁面的時候再加載另一個頁面所需要的js文件，怎麼做呢？只需要在router下面的index.js修改就可以了。
默認的路由配置方式：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    }]
})

異步組件按需加載的配置方式：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/pages/home/Home')
    },
    {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City')
    }]
})