当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

举个栗子，一般我习惯在 main.js 里面配置路由：

import Home from './demo/home';
import Guide from './demo/guide';
import Component from './demo/component';
import Resource from './demo/resource';

const router = new VueRouter({
  linkActiveClass: 'active',
  routes : [
    {
      path : '/home',
      name: 'home',
      component : Home
    },
    {
      path : '/guide',
      name: 'guide',
      component : Guide,
    },
    {
      path : '/component',
      name: 'component',
      component : Component,
    },
    {
      path : '/resource',
      name: 'resource',
      component : Resource
    },
    // 重定向
    { 
      path: '/', 
      redirect: '/home',
      component : Home
    },
    { 
      path: '*', 
      redirect: '/home',
      component : Home
    },
  ]
});

其实只需要结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

const Home = require('./demo/home').default
const Guide = require('./demo/guide').default
const Component = require('./demo/component').default
const Resource = require('./demo/resource').default

const router = new VueRouter({
  linkActiveClass: 'active',
  routes : [
    {
      path : '/home',
      name: 'home',
      component : Home
    },
    {
      path : '/guide',
      name: 'guide',
      component : Guide,
    },
    {
      path : '/component',
      name: 'component',
      component : Component,
    },
    {
      path : '/resource',
      name: 'resource',
      component : Resource
    },
    // 重定向
    { 
      path: '/', 
      redirect: '/home',
      component : Home
    },
    { 
      path: '*', 
      redirect: '/home',
      component : Home
    },
  ]
});

更详细的，可以参考官方的路由懒加载文档。