vue實現路由懶加載的3種方法示例
前言
路由懶加載在訪問頁面的時候非常重要，能夠提高首頁加載速度，避免出現加載時候白頁，如果沒有懶加載，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的異步組件 , 實現按需加載，每個組件生成一個js文件，實現組件的懶加載。
/* vue異步組件 */
{ path: '/A', name: 'A', component: resolve => require(['@/components/A'],resolve) }
3、webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技術，實現按需加載。
這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
語法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
dependencies: 依賴的模塊數組
callback: 回調函數，該函數調用時會傳一個require參數
chunkName: 模塊名，用于構建時生成文件時命名使用
const A= resolve => require.ensure([], () => resolve(require('@/components/A')), 'A');
注意：requi.ensure的模塊只會被下載下來，不會被執(zhí)行，只有在回調函數使用require(模塊名)后，這個模塊才會被執(zhí)行。
總結
到此這篇關于vue實現路由懶加載的3種方法示例的文章就介紹到這了,更多相關vue路由懶加載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue3時間戳轉換，?vue2轉換時間戳的時候一般使用過濾器的方式，到vue3之后，vue3移除了過濾器，就不能再用了，官方是推薦使用方法或者計算屬性的方式。下面我們來看看詳細介紹吧</P><P>2021-12-12
vue 地區(qū)選擇器v-distpicker的常用功能
這篇文章主要介紹了vue 地區(qū)選擇器v-distpicker的常用功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
最近遇見一個需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關于前端大文件上傳與下載(分片上傳)的詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
由于公司網絡登element-ui官方文檔很慢,想把他載下來離線文檔本地跑,下面這篇文章主要給大家介紹了關于本地部署element-plus文檔的簡單步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
vue基礎之v-bind屬性、class和style用法分析
這篇文章主要介紹了vue基礎之v-bind屬性、class和style用法,結合實例形式分析了vue.js中v-bind綁定及class、style樣式控制相關操作技巧,需要的朋友可以參考下2019-03-03
如何巧用Vue.extend繼承組件實現el-table雙擊可編輯(不使用v-if、v-else)
這篇文章主要給大家介紹了關于如何巧用Vue.extend繼承組件實現el-table雙擊可編輯的相關資料,不使用v-if、v-else,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
Vue3中shallowRef和shallowReactive的性能優(yōu)化
Vue3中shallowRef和shallowReactive是淺層響應式API,用于性能優(yōu)化,僅追蹤對象或數組第一層屬性的變化,本文就來詳細的介紹一下具體的使用,感興趣的可以了解一下2024-09-09
Vue?warn:Property?"state"?was?accessed?during
這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue集成openlayers加載geojson并實現點擊彈窗教程
這篇文章主要為大家詳細介紹了vue集成openlayers加載geojson并實現點擊彈窗教程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
最近寫代碼遇到一問題祖先級別的組件怎么操作孫子的兒子的組件方法，在網上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus，接下來通過本文給大家介紹vue?祖先組件操作后代組件方法,需要的朋友可以參考下2022-11-11