vue中 延迟加载组件

vue中 延迟加载组件

使用背景

常规的import方式引入组件从功能上并没有什么问题，但是这种方式只要运行路由模块就会加载所有组件，但是用户可能压根不会进行浏览—浪费资源

延迟加载使用场景

我们可以应用延迟加载和代码拆分来改进它，所谓延迟加载是在需要的时候才进行加载

1. 代码拆分：就是之前所说的组件封装，组件拆分
2. 延迟加载：需要时才加载组件，而不是一开始就全部加载好
3. 将代码块的加截推迟到需要的时候加载，从而使应用程序的初始包变得更小，达到节省性能的目的

代码演示

const router = new VueRouter({
  routes: [
  { 
  	path: '/foo',
  	//延迟加载组件:需要使用这个组件才会加载这个组件
  	component: () => import('./Foo.vue')
  }
 ]
})