vue懒加载 · 常用笔记

# vue懒加载 # Vue中的懒加载和按需加载 **1. 懒加载** - 懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。 - vue项目打包的时候，如果项目比较庞大，那么将会打出一个很大的包，速度比较慢，这个时候可以考虑拆分，不要把所有的内容都打到一个包里面去。 - **1.路由懒加载：** 我们平常使用router可能如下： ``` <pre class="calibre13">``` import Vue from 'vue' import Router from 'vue-router' import index from '@/components/index' Vue.use(Router); export default new Router({ routes: [ { path: '/index', name: 'index', component: index, meta: { title: 'index' } } ] }) ``` ``` 先用import引入，然后在component里面配，这种其实是同步模式，也就是说你这样写，index.vue组件里的代码会被打入总包里面。还有一种和上面类似的同步写法，使用require去写的： ``` <pre class="calibre13">``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new Router({ routes: [ { path: '/index', name: 'index', component: require('@/components/index').default, meta: { title: 'index' } } ] }) ``` ``` 如果要从总包里分出去，就要用到异步加载组件，改造起来也很简单： ``` <pre class="calibre13">``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new Router({ routes: [ { path: '/index', name: 'index', component: ()=>import('@/components/index'), meta: { title: 'index' } } ] }) ``` ``` 改造之后，我们打包的时候就会发现多出来一些js: ![](https://img-blog.csdnimg.cn/20200501170222462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5MDA0MA==,size_16,color_FFFFFF,t_70#pic_center) 然后请求异步路由的时候，也会发现额外请求了js: ![](https://img-blog.csdnimg.cn/20200501170359128.png#pic_center) 这表示异步路由的内容被单独打包出来了，只在跳转在当前路由的时候加载。还有一种异步请求的写法： ``` <pre class="calibre13">``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new Router({ routes: [ { path: '/index', name: 'index', component: (resolve)=>require(['@/components/index'],resolve), meta: { title: 'index' } } ] }) ``` ``` 注意()=>import (’./index.vue’)和(resolve)=>require(\[’./index.vue’\],resolve)这两种写法，两者实现异步的机制不一样，内部处理逻辑也不同。 ``` <pre class="calibre13">``` //import()返回promise,利用promise的then执行异步 const fn=()=>import('./index.vue'); fn.then(function(item){ console.log(item) }); //返回不是promise,利用普通的回调执行异步 const fn=(resolve)=>require (['./index.vue'],resolve); fn(function(item){ console.log(item); }); ``` ``` - **2.组件懒加载：** 除了路由可以实现懒加载，组件的引用其实也可以分出去，我们先来看看平常的组件引用： ``` <pre class="calibre13">``` components:{ index:require('./index.vue').default, }, ``` ``` 可以改造成异步请求，让它的打包代码从主包中分割出去： ``` <pre class="calibre13">``` components:{ index:()=>import ('./index.vue'),//方式1 index:(resolve)=>require (['./index.vue'],resolve),//方式2 }, ``` ``` 不过注意异步加载组件，组件就不是立马出现，而是要等一会才能出现，会出现一个短暂空白，这种根据情况具体使用。