什麼是路由懶載入？

也叫延遲載入，即在需要的時候進行載入，隨用隨載。

官方解釋：

1：當打包構建應用時，javascript 包會變得非常大，影響頁面載入。

2：如果我們能把不同路由對應的元件分程式設計客棧割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。

官方在說什麼呢？為什麼需要懶載入？

1：首先，我們知道路由中通常會定義很多不同的頁面。

2：這個頁面這專案build打包後，一般情況下，會放在一個單獨的js檔案中

3：但是，如果很多的頁面都放在同一個js檔案中，必然會造成這個頁面非常大

4：如果我們一次性的從伺服器中請求下來這個頁面，可能會花費一定時間，使用者體驗不好

5：如何避免這種情況發生呢？使用路由懶載入就可以了

繼續解釋原由？

1：像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大。

2：造成進入首頁時，需要載入的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利於使用者體驗。

3：而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時

也就是說：進入頁面不用也不需要一次性載入過多資源造成載入時間過程！

路由懶載入做了什麼事情？

1：主要作用是將路由對應的元件打包成一個個的js程式碼塊

2：只有在這個路由被訪問到的時候，才載入對應的元件，否則不載入！

即：只有在這個路由被訪問到的時候，才載入對應的元件，否則不載入！

1:.如何實現路由懶載入？？

vue專案實現路由按需載入（路由懶載入）的三種方式：

1：Vue非同步元件

2：ES6標準語法import（）---------推薦使用！！！！！

3：webpack的require，ensure()

2.Vue非同步載入技術

1：vue-router配置路由，使用vue的非同步元件技術，可以實現懶載入，此時一個元件會生成一個js檔案。

2：component: resolve => require(['放入需要載入的路由地址'],resolIIzrGve)

 {
 path: '/problem',name: 'problem',component: resolve => require(['../pages/home/problemList'],resolve)
 }

3.ES6推薦方式imprort ()----推薦使用

1：直接將元件引入的方式，import是ES6的一個語法標準，如果需要瀏覽器相容，需要轉化成es5的語法。

2：推薦使用這種方式，但是注意wepack的版本>2.4

3：vue官方文件中使用的也是import實現路由懶載入

4：上面宣告匯入，下面直接使用

import Vue from 'vue';
import Router from 'vue-router';
// 官網可知：下面沒有指定webpackChunkName，每個元件打包成一個js檔案。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoowww.cppcns.com')
// 下面2行程式碼，指定了相同的webpackChunkName，會合並打包成一個js檔案。
// const Foo = () =>www.cppcns.com; import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
 routes: [
  {
   path: '/Foo',name: 'Foo',component: Foo
  },{
   path: '/Aoo',name: 'Aoo',component: Aoo
  }
 ]
})

4.webpack提供的require.ensure()實現懶載入：

1：vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需載入。

2：這種情況下，多個路由指定相同的chunkName，會合並打包成一個js檔案。

3：require.ensure可實現按需載入資源，包括js,css等。他會給裡面require的檔案單獨打包，不會和主檔案打包在一起。

4：第一個引數是陣列，表明第二個引數裡需要依賴的模組，這些會提前載入。

5：第二個是回撥函式,在這個回撥函式裡面require的檔案會被單獨打包成一個chunk,不會和主檔案打包在一起，這樣就生成了兩個chunk,第一次載入時只加載主檔案。

6：第三個引數是錯誤回撥。

7：第四個引數是單獨打包的chunk的檔名

此處程式碼參考原文連結：https://blog.csdn.net/qq_41998083/article/details/109726402

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',name:'HelloWorld',component:HelloWorld
	}
	}]
})

4.import和require的比較（瞭解）

1：import 是解構過程並且是編譯時執行

2：require 是賦值過程並且是執行時才執行，也就是非同步載入

3：require的效能相對於import稍低，因為require是在執行時才引入模組並且還賦值給某個變數

至此：關於VueRout程式設計客棧er懶載入的基本知識以及使用方式已經介紹完畢，邏輯道理很簡單， 關鍵在實踐，感謝觀看！

總結

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