在大型项目中，通常会涉及到很多页面间的跳转，传参，如果前期不合理架构及优化，后面可能会导致项目越来越臃肿，而且一堆bug如期而至般。
所以异步组建和懒加载是每个项目必须的，现在来看看路由组建的异步抽离案例
原理：利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载。
在vue-router 中，我们可以使用异步组件来按需加载，其方式有两种，注意：第二种需要添加 syntax-dynamic-import 插件，第一种：
const one =() => import( "../components/one.vue");
const two = () => import( "../components/two.vue");
const three = () => import( "../components/three.vue");
const four = () => import("../components/four.vue");
第二种：webpack的require.ensure webpack会将require.ensure中引入的代码从主boundle中抽离
const one = r => require.ensure([], () => r(require('../components/one.vue')), 'chunkname1')
const two = r => require.ensure([], () => r(require('../components/two.vue')), 'chunkname1')
const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2')
const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2')
虽说两种方式都能抽离异步组建，但require 是赋值过程并且在运行时才会执行， import 是解构过程并且在编译时执行，所以一般建议使用第一种方式。
