Vue + Webpack 學習隨手筆記 - 讓路由頁延遲（按需）加載

拿購物商城的Webapp做爲例子舉例。
下面的導航條很明顯是一個帶有路由功能的模塊，經過配置路由，router的index.js能夠以下配置：

import Vue from 'vue';
import Router from 'vue-router';

import Home from 'pages/home';
import Category from 'pages/category';
import Personal from 'pages/personal';
import Cart from 'pages/cart';

Vue.use(Router);

const routes = [
  {
    name: 'home',
    path: '/home',
    component: Home,   
  }, {
    name: 'category',
    path: '/category',
    component: Category
  }, {
    name: 'personal',
    path: '/personal',
    component: Personal
  }, {
    name: 'cart',
    path: '/cart',
    component: Cart
  }, {
    name: 'search',
    path: '/search',
    component: Search
  }
];

export default new Router({
  routes
});

可是這樣配置有一個問題：在第一次頁面加載時（不論加載是打開首頁仍是分類頁），只有一頁會顯示出來，卻加載了四頁的資源。
——爲了解決這個問題，延遲（按需）加載則頗有必要了，即當用戶點擊導航條選項時，再觸發該頁面的加載。這時咱們只須要做小小的改動，把路由component配置項的值改成一個函數。好比將開頭的

import Home from 'pages/home';
import Category from 'pages/category';
import Personal from 'pages/personal';
import Cart from 'pages/cart';

刪除後，改爲一個函數聲明，這樣component就被當成一個函數去調用。

const Home = () => { import('pages/home') };
const Category = () => { import('pages/Category') };
const Personal = () => { import('pages/Personal') };
const Cart = () => { import('pages/Cart') };

又或者，直接在各個component處直接寫一個箭頭函數，這樣還少佔用幾個變量。拿一個舉例：

component: () => import('pages/home')

這樣，就能夠實現路由地址指向頁面（這個案例中的頁面只有一個組件）的按需加載了。

補充：以上對Webpack要求爲 > v2,若你的Webpack版本較低，具體能夠參考Vue官方異步組件的寫法。上邊的例子應該改寫爲：

component: (resolve) => {
  require(['pages/home'], resolve);
}

你可能還會用到組件動態渲染的知識，參考：https://cn.vuejs.org/v2/api/#...