路由懒加载简洁

0.很多页面都会打包到同一个js文件中，文件将会异常的大
1.合理解决网页延迟问题
2.能够最大化的减少http请求
3.组件按需加载,不需要的就不加载

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

一.Vue异步组件(异步加载)

vue-router 配置路由，使用vue的异步组件技术，可以实现懒加载，但是这种情况是一个组件会生成一个js文件

component:resolve => require(['需要加载的组件地址'],resolve)

{ path: "/home", component: resolve=>require(['@/pages/Home']),resolve}

二.推荐方式 ES6的import()

const 组件名 = () => import('组件路径')

1.箭头函数返回的是Promise,Vue Router只会在第一次进入页面时才会获取这个函数,然后使用缓存数据
const Home = () => import("@/pages/Home")
const Login = () => import("@/pages/Login")

三.不推荐方式webpack提供的require.ensure()