Vue路由的懶加載深入詳解
一、概念
官方描述：
當(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)文章
這篇文章主要介紹了vue ssr服務(wù)端渲染(小白解惑)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動
這篇文章主要介紹了Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應(yīng)的區(qū)域下拉框，element-china-are插件，包括distpicker插件，通過代碼講解如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動，需要的朋友可以參考下2023-02-02
Vue3組合式API中使用forwardRef()函數(shù)
本文主要介紹了Vue3組合式API中使用forwardRef()函數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了Vue中數(shù)組和對象更改后視圖不刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法
這篇文章主要介紹了vue 框架下自定義滾動條(easyscroll)實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)回到頂部動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
利用Vue-draggable組件實現(xiàn)Vue項目中表格內(nèi)容的拖拽排序
這篇文章主要介紹了利用Vue-draggable組件實現(xiàn)Vue項目中表格內(nèi)容的拖拽排序，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了vue如何將對象中所有的key賦為空值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽指令的基本用法，文中講解非常細致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了vue-router源碼之history類的淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05