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引进来的组件
路由非懒加载