vue按需載入

miko發表於2017-12-01
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

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

相關文章