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 }, ``` ``` 不過注意異步加載組件，組件就不是立馬出現，而是要等一會才能出現，會出現一個短暫空白，這種根據情況具體使用。