欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue路由的懶加載深入詳解

 更新時(shí)間：2022年12月26日 08:41:05   作者：落雪小軒韓  
這篇文章主要介紹了vue-router路由懶加載及實(shí)現(xiàn)方式,路由懶加載的主要作用是將?路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊，只有在這個(gè)路由被訪問(wèn)到的時(shí)候，才會(huì)加載對(duì)應(yīng)組件的代碼塊，需要的朋友可以參考下

一、概念

官方描述：

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

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

解析：

路由中通常會(huì)定義很多不同的頁(yè)面，這些頁(yè)面打包后被放在一個(gè)js文件中，但是這么多頁(yè)面放在一個(gè)js文件中必然會(huì)造成頁(yè)面非常大。如果我們一次性從服務(wù)器上請(qǐng)求下來(lái)這個(gè)頁(yè)面，可能需要花費(fèi)一定的時(shí)間，甚至用戶的電腦上還可能會(huì)出現(xiàn)短暫的空白情況，使用路由的懶加載就可以避免這種情況了。

路由懶加載做了什么？

主要作用就是將路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊，只有在這個(gè)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)的組件。

二、代碼實(shí)現(xiàn)

普通寫法：

import Home from '../components/Home'
import About from '../components/About'
Vue.use(VueRouter)
const routes = [
	{
		path: '/home',
		component: Home
	},
	{
		path: '/about',
		component: About 
	}
]

路由懶加載寫法：

import Home from '../components/Home'
import About from '../components/About'
Vue.use(VueRouter)
const routes = [
	{
		path: '/home',
		component: () => import('../components/Home')
	},
	{
		path: '/about',
		component: () => import('../components/About')
	}
]

三、打包文件的解析

執(zhí)行打包的命令 npm run build

app.xxxx.js 當(dāng)前應(yīng)用程序開發(fā)的所有代碼（業(yè)務(wù)代碼）

manifest.xxxx.js 為打包的代碼做底層支撐的（為模塊化…做底層支撐） vendor.xxxx.js vendor(提供者，第三方依賴包vue,vue-loader,…)

當(dāng)使用了路由懶加載后打包

用到了兩個(gè)路由懶加載，多分出了兩個(gè)js文件。這兩個(gè)js文件不會(huì)一開始就從服務(wù)器上請(qǐng)求下來(lái)，它會(huì)等我們真正需要用的時(shí)候再請(qǐng)求下來(lái)。

到此這篇關(guān)于Vue路由的懶加載深入詳解的文章就介紹到這了,更多相關(guān)Vue路由懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論