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/#...