vue實現(xiàn)路由懶加載的3種方法示例
前言
路由懶加載在訪問頁面的時候非常重要，能夠提高首頁加載速度，避免出現(xiàn)加載時候白頁，如果沒有懶加載，webpack打包后的文件會非常大。
- import按需加載（常用）
- vue異步組件
- webpack提供的require.ensure()
1、import按需加載（常用）
允許將不同的組件打包到一個異步塊中，需指定了相同的webpackChunkName。
把組件按組分塊
const A = () => import(/* webpackChunkName: "group-A" */ '@/A/A.vue') const B = () => import(/* webpackChunkName: "group-A" */ '@/A/B.vue') const C = () => import(/* webpackChunkName: "group-A" */ '@/A/C.vue')
注意：如果使用的是 babel，需要安裝syntax-dynamic-import插件，才能使 babel 可以正確地解析語法。
2、vue異步組件
使用vue的異步組件 , 實現(xiàn)按需加載，每個組件生成一個js文件，實現(xiàn)組件的懶加載。
/* vue異步組件 */
{ path: '/A', name: 'A', component: resolve => require(['@/components/A'],resolve) }
3、webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技術，實現(xiàn)按需加載。
這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
語法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
dependencies: 依賴的模塊數(shù)組
callback: 回調函數(shù)，該函數(shù)調用時會傳一個require參數(shù)
chunkName: 模塊名，用于構建時生成文件時命名使用
const A= resolve => require.ensure([], () => resolve(require('@/components/A')), 'A');
注意：requi.ensure的模塊只會被下載下來，不會被執(zhí)行，只有在回調函數(shù)使用require(模塊名)后，這個模塊才會被執(zhí)行。
總結
到此這篇關于vue實現(xiàn)路由懶加載的3種方法示例的文章就介紹到這了,更多相關vue路由懶加載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件，這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關資料展開詳細內容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了使用vue-cli打包過程中的步驟以及問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題
這篇文章主要介紹了解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue Router動態(tài)路由使用方法總結,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue+Element?ui實現(xiàn)照片墻效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue3優(yōu)雅的使用element-plus的dialog,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Vue通過vue-router實現(xiàn)頁面跳轉的全過程
這篇文章主要介紹了Vue通過vue-router實現(xiàn)頁面跳轉的操作步驟,文中有詳細的代碼示例和圖文供大家參考,對大家的學習或工作有一定的幫助,感興趣的朋友可以參考下2024-04-04
基于vue-cli、elementUI的Vue超簡單入門小例子（推薦）
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡單入門小例子，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue2.0使用swiper組件實現(xiàn)輪播的示例代碼
下面小編就為大家分享一篇vue2.0使用swiper組件實現(xiàn)輪播的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03