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

Vue路由的懶加載深入詳解

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

一、概念

官方描述：

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

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

解析：

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

路由懶加載做了什么？

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

二、代碼實現(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)使用了路由懶加載后打包

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

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

相關(guān)文章

最新評論