Vue路由的懶加載深入詳解
一、概念
官方描述：
當(dāng)打包構(gòu)建應(yīng)用時(shí)，Javascript包會(huì)變得非常大，影響頁(yè)面加載。
如果我們能把不同路由對(duì)應(yīng)的組件分割成功不同的代碼塊，然后當(dāng)路由被訪(fǎ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í)間，甚至用戶(hù)的電腦上還可能會(huì)出現(xiàn)短暫的空白情況，使用路由的懶加載就可以避免這種情況了。
路由懶加載做了什么？
主要作用就是將路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊，只有在這個(gè)路由被訪(fǎng)問(wèn)的時(shí)候才加載對(duì)應(yīng)的組件。
二、代碼實(shí)現(xiàn)
普通寫(xiě)法：
import Home from '../components/Home'
import About from '../components/About'
Vue.use(VueRouter)
const routes = [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
路由懶加載寫(xiě)法：
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)用程序開(kāi)發(fā)的所有代碼（業(yè)務(wù)代碼）
manifest.xxxx.js 為打包的代碼做底層支撐的（為模塊化…做底層支撐） vendor.xxxx.js vendor(提供者，第三方依賴(lài)包vue,vue-loader,…)
當(dāng)使用了路由懶加載后打包
用到了兩個(gè)路由懶加載，多分出了兩個(gè)js文件。這兩個(gè)js文件不會(huì)一開(kāi)始就從服務(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)文章
這篇文章主要介紹了vue ssr服務(wù)端渲染(小白解惑)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue使用distpicker插件實(shí)現(xiàn)省市級(jí)下拉框三級(jí)聯(lián)動(dòng),比如通過(guò)JSON文件生成對(duì)應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過(guò)代碼講解如何使用distpicker插件實(shí)現(xiàn)省市級(jí)三聯(lián)跳動(dòng)，需要的朋友可以參考下2023-02-02
Vue3組合式API中使用forwardRef()函數(shù)
本文主要介紹了Vue3組合式API中使用forwardRef()函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
詳解Vue中數(shù)組和對(duì)象更改后視圖不刷新的問(wèn)題
這篇文章主要介紹了Vue中數(shù)組和對(duì)象更改后視圖不刷新的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動(dòng)條(easyscroll)實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue.js實(shí)現(xiàn)回到頂部動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)回到頂部動(dòng)畫(huà)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
利用Vue-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序
這篇文章主要介紹了利用Vue-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
這篇文章主要介紹了vue如何將對(duì)象中所有的key賦為空值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法
這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽(tīng)指令的基本用法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了vue-router源碼之history類(lèi)的淺析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05