vue路由懶加載及組件懶加載 - 小小x - 博客園

推薦地址: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('需要加載的模塊地址')

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容