vue+webpack实现按需加载

webpack中提供了require.ensure()来实现按需加载。之前引入路由是经过import 这样的方式引入，改成const定义的方式进行引入，在router的index.js的文件中，修改如下代码实现按需加载
页面非按需加载

import Home from './home.vue'

页面按需加载

const Home = r => require.ensure([],() => r(require('@/views/home')),home)

经过vue写的单页面应用，会有不少页面路由的注入，打包构建时，javascript体积会很是大，影响加载。若是把不一样路由对应的组件分割成不一样的代码块，只有当路由被访问的时候才加载对应的组件，这样会大大提升首屏显示速度，可是可能其余页面的访问速度会慢下来。相似于图片懒加载，用户在不看这张图片就去所有加载下来，会增长请求时间，下降用户体验，下降访问速度。单页面应用也是同样的，用户可能没有经过点击去到其余页面，只是在主页停留，就不必把全部页面资源所有加载进来，若是用户点击再去加载，就大大下降了加载时间，提升请求速度和用户体验。