溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
路由懶加載在訪問頁面的時候非常重要，能夠提高首頁加載速度，避免出現加載時候白頁，如果沒有懶加載，webpack打包后的文件會非常大。
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的模塊只會被下載下來，不會被執行，只有在回調函數使用require(模塊名)后，這個模塊才會被執行。
總結
到此這篇關于vue實現路由懶加載的3種方法示例的文章就介紹到這了,更多相關vue路由懶加載內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
