什么是路由懶加載？

也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。

官方解釋：

 1：當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。

 2：如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

官方在說(shuō)什么呢？為什么需要懶加載？

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

 2：這個(gè)頁(yè)面這項(xiàng)目build打包后，一般情況下，會(huì)放在一個(gè)單獨(dú)的js文件中

 3：但是，如果很多的頁(yè)面都放在同一個(gè)js文件中，必然會(huì)造成這個(gè)頁(yè)面非常大

 4：如果我們一次性的從服務(wù)器中請(qǐng)求下來(lái)這個(gè)頁(yè)面，可能會(huì)花費(fèi)一定時(shí)間，用戶體驗(yàn)不好

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

繼續(xù)解釋原由？

    1：像vue這種單頁(yè)面應(yīng)用，如果沒(méi)有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大。

    2：造成進(jìn)入首頁(yè)時(shí)，需要加載的內(nèi)容過(guò)多，時(shí)間過(guò)長(zhǎng)，會(huì)出啊先長(zhǎng)時(shí)間的白屏，即使做了loading也是不利于用戶體驗(yàn)。

    3：而運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力，減少首頁(yè)加載用時(shí)

也就是說(shuō)：進(jìn)入頁(yè)面不用也不需要一次性加載過(guò)多資源造成加載時(shí)間過(guò)程！

路由懶加載做了什么事情？

 1：主要作用是將路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊

 2：只有在這個(gè)路由被訪問(wèn)到的時(shí)候，才加載對(duì)應(yīng)的組件，否則不加載！

即：只有在這個(gè)路由被訪問(wèn)到的時(shí)候，才加載對(duì)應(yīng)的組件，否則不加載！

1:.如何實(shí)現(xiàn)路由懶加載？？

 vue項(xiàng)目實(shí)現(xiàn)路由按需加載（路由懶加載）的三種方式：

  1：Vue異步組件

  2：ES6標(biāo)準(zhǔn)語(yǔ)法import（）---------推薦使用?。。。?！

  3：webpack的require，ensure()

2.Vue異步加載技術(shù)

  1：vue-router配置路由，使用vue的異步組件技術(shù)，可以實(shí)現(xiàn)懶加載，此時(shí)一個(gè)組件會(huì)生成一個(gè)js文件。

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

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

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

  1：直接將組件引入的方式，import是ES6的一個(gè)語(yǔ)法標(biāo)準(zhǔn)，如果需要瀏覽器兼容，需要轉(zhuǎn)化成es5的語(yǔ)法。

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

  3：vue官方文檔中使用的也是import實(shí)現(xiàn)路由懶加載

  4：上面聲明導(dǎo)入，下面直接使用

import Vue from 'vue';
import Router from 'vue-router';
// 官網(wǎng)可知：下面沒(méi)有指定webpackChunkName，每個(gè)組件打包成一個(gè)js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代碼，指定了相同的webpackChunkName，會(huì)合并打包成一個(gè)js文件。
// const Foo = () => 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()實(shí)現(xiàn)懶加載：

  1：vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實(shí)現(xiàn)按需加載。

  2：這種情況下，多個(gè)路由指定相同的chunkName，會(huì)合并打包成一個(gè)js文件。

  3：require.ensure可實(shí)現(xiàn)按需加載資源，包括js,css等。他會(huì)給里面require的文件單獨(dú)打包，不會(huì)和主文件打包在一起。

  4：第一個(gè)參數(shù)是數(shù)組，表明第二個(gè)參數(shù)里需要依賴的模塊，這些會(huì)提前加載。

 5：第二個(gè)是回調(diào)函數(shù),在這個(gè)回調(diào)函數(shù)里面require的文件會(huì)被單獨(dú)打包成一個(gè)chunk,不會(huì)和主文件打包在一起，這樣就生成了兩個(gè)chunk,第一次加載時(shí)只加載主文件。

 6：第三個(gè)參數(shù)是錯(cuò)誤回調(diào)。

 7：第四個(gè)參數(shù)是單獨(dú)打包的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 是解構(gòu)過(guò)程并且是編譯時(shí)執(zhí)行

2：require 是賦值過(guò)程并且是運(yùn)行時(shí)才執(zhí)行，也就是異步加載

3：require的性能相對(duì)于import稍低，因?yàn)閞equire是在運(yùn)行時(shí)才引入模塊并且還賦值給某個(gè)變量

至此：關(guān)于VueRouter懶加載的基本知識(shí)以及使用方式已經(jīng)介紹完畢，邏輯道理很簡(jiǎn)單， 關(guān)鍵在實(shí)踐，感謝觀看！

總結(jié)

到此這篇關(guān)于vue-router路由懶加載及實(shí)現(xiàn)的3種方式的文章就介紹到這了,更多相關(guān)vue-router路由懶加載實(shí)現(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論