vue-router路由懒加载

vue-router路由懒加载：

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

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载

在创建路由的时候，component属性的值是一个异步函数

//异步加载路由组件，可以减少加载时间
const Singer = (resolve) => {
	import('components/singer/singer').then( (module) => {
		resolve(module)
	} )
}
//相当于
import Singer from 'components/singer/singer'

 

vue-router路由懒加载-----懒加载也叫作延迟加载，在需要的时候在加载

为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

简单的说就是：进入首页，不用一次加载过多资源，造成用时过长

路由懒加载----就是在创建路由的时候在component属性上是一个异步函数，然后函数返回通过require引进来的组件

 

路由非懒加载