Vue按需加載

概念（懶加載）

當打包構建應用時，JavaScript包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，嗯，這樣就更加高效了。

場景

xxx項目做爲一個單頁面應用，採用組件化的開發模式，每次啓動首頁都會加載所有組件，但此時只是訪問了首頁而已，就形成了大量組件污染加載的狀況。

目的

只在訪問當前頁面時加載對應組件，避免頁面組件所有加載。（按需加載）

實現

app.vue

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import 'babel-polyfill'
import {Promise} from 'es6-promise-polyfill'
import App from '../components/app'

// 定義路由，每一個路由映射一個組件。
const Routers = [
    {
        path: '/',   // 路徑
        component: resolve => require(['../components/member/index], resolve)   // 異步加載組件
    },
    {
        path: '/login',
        component: resolve => require(['../components/member/login'], resolve)
    }
]

const RouterConfig = {
    routes: Routers
}
// 建立router實例，並傳遞路由配置。
const router = new VueRouter(RouterConfig);
// 建立並掛載根實例。
new Vue({
    el:'#app',
    router,
    // 將h做爲createElement的別名是一個通用慣例。
    render: h =>(App)  
})

注意：

• require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，例如['moduleA','moduleB']，第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部使用這些模塊。
• 示例代碼中使用了異步的方式加載組件，其中require函數負責異步引入將要渲染的組件，而resolve則負責異步回調渲染組件。
• babel-polyfill：對Promise進行轉碼編譯；

npm install --save babel-polyfill

• es6-promise-polyfill 解決Promise兼容性問題。關於不太瞭解Promise的同窗請移步這裏

npm install --save es6-promise-polyfill

若有錯誤，還請不吝指正。