前言

路由懶載入在訪問頁面的時候非常重要，能夠提高首頁載入速度，避免出現載入時候白頁，如果沒有懶載入，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的模組只會被下載下來，不會被執行，只有在回撥函式使用require(模組名)後，這個模組才會被執行。

總結

到此這篇關於vue實現路由懶載入的3種方法示例的文章就介紹到這了,更多相關vue路由懶載入內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！