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体积会非常大，影响加载。如果把不同路由对应的组件分割成不同的代码块，只有当路由被访问的时候才加载对应的组件，这样会大大提高首屏显示速度，但是可能其他页面的访问速度会慢下来。类似于图片懒加载，用户在不看这张图片就去全部加载下来，会增加请求时间，降低用户体验，降低访问速度。单页面应用也是一样的，用户可能没有通过点击去到其他页面，只是在主页停留，就没必要把所有页面资源全部加载进来，如果用户点击再去加载，就大大降低了加载时间，提高请求速度和用户体验。