vue----webpack----路由懒加载,组件懒加载
一、懒加载
也叫延迟加载或者按需加载,即在需要的时候进行加载,
二、为什么要使用懒加载
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,
造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,
即使做了loading也是不利于用户体验,
而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
简单的说就是:进入首页不用一次加载过多资源造成用时过长
方式一:使用vue的异步组件,可以实现路由的懒加载
{ path: '/home', name: 'home', component: resolve => require([需要加载的路由的地址], resolve) }
方式二: es6提出的import(推荐使用这种方式)
const homeFn = () => import('../components/home/home') { path: '/home', name: 'home', component: homeFn },
组件懒加载
和路由懒加载方式相同,改变组件的引入方式
方式一:
方式二:
总结:
路由懒加载和组件懒加载都是通过改变组件的引入方式