vue-router懶加載或者按需加載

先了解一下require和import

require 是 CommonJS(在Node中實現), 運行時調用，理論上可以運用在代碼的任何地方

import 是es6的一個語法標准，如果要兼容瀏覽器的話必須轉化成es5的語法,編譯時調用，必須放在文件開頭

require 是賦值過程，其實require的結果就是對象、數字、字符串、函數等，再把require的結果賦值給某個變量

import 是解構過程，但是目前所有的引擎都還沒有實現import，我們在node中使用babel支持ES6，也僅僅是將ES6轉碼為ES5再執行，import語法會被轉碼為require

結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載。

懶加載1：

component: resolve => require(['@/view/index.vue'], resolve) 

//一個推薦的做法是將異步組件和 webpack 的 code-splitting 功能一起配合使用：
Vue.component('async-webpack-example', function (resolve) {
  // 這個特殊的 `require` 語法將會告訴 webpack
  // 自動將你的構建代碼切割成多個包，這些包
  // 會通過 Ajax 請求加載
require(['./my-async-component'], resolve)　

用require這種方式引入的時候，會將你的component分別打包成不同的js，加載的時候也是按需加載，只用訪問這個路由網址時才會加載這個js

 

懶加載2：推薦使用這種方式(需要webpack > 2.4)

首先，可以將異步組件定義為返回一個 Promise 的工廠函數 (該函數返回的 Promise 應該 resolve 組件本身)：

const Foo = () => Promise.resolve({ /* 組件定義對象 */ })

第二，在 Webpack 2 中，我們可以使用動態 import語法來定義代碼分塊點 (split point)：

import('./Foo.vue') // 返回 Promise

結合這兩者，這就是如何定義一個能夠被 Webpack 自動代碼分割的異步組件。

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue')}
  ]
})