推薦地址:https://www.cnblogs.com/xiaoxiaoxun/p/11001884.html
VUE路由懶加載及組件懶加載
一、為什么要使用路由懶加載 為給客戶更好的客戶體驗,首屏組件加載速度更快一些,解決白屏問題。
二、定義 懶加載簡單來說就是延遲加載或按需加載,即在需要的時候的時候進行加載。
三、使用 常用的懶加載方式有兩種:即使用vue異步組件?和?ES中的import
? ??1、未用懶加載,vue中路由代碼如下
????????import Vue from 'vue'
????????import Router from 'vue-router'
? ??????import HelloWorld from '@/components/HelloWorld'
????????Vue.use(Router)
?????????export default new Router({
?????????routes: [ { path: '/', name: 'HelloWorld',component:HelloWorld}?
?????????] })
? ??2、vue異步組件實現懶加載
? ??????方法:component:resolve=>(require(['需要加載的路由的地址']),resolve)
????3、ES 提出的import方法,(------最常用------)
? ??????方法:const HelloWorld = ()=>import('需要加載的模塊地址')????(不加 { } ,表示直接return)
四、組件懶加載
?相同與路由懶加載
????1、原來組件中寫法????相同與路由懶加載
????2、const方法
????3、異步方法
五、總結:
路由和組件的常用兩種懶加載方式:
? ??1、vue異步組件實現路由懶加載
????component:resolve=>(['需要加載的路由的地址',resolve])
? ??2、es提出的import(推薦使用這種方式)
? ??const HelloWorld = ()=>import('需要加載的模塊地址')