vue2筆記 — vue-router路由懶加載的實(shí)現(xiàn)
在Web應(yīng)用程序中，系統(tǒng)的瓶頸常在于系統(tǒng)的響應(yīng)速度。如果系統(tǒng)響應(yīng)速度過(guò)慢，用戶(hù)就會(huì)出現(xiàn)埋怨情緒，系統(tǒng)的價(jià)值也因此會(huì)大打折扣。因此，提高系統(tǒng)響應(yīng)速度，是非常重要的。
懶加載(Load On Demand)是一種獨(dú)特而又強(qiáng)大的數(shù)據(jù)獲取方法,它能夠在用戶(hù)滾動(dòng)頁(yè)面的時(shí)候自動(dòng)獲取更多的數(shù)據(jù),而新得到的數(shù)據(jù)不會(huì)影響原有數(shù)據(jù)的顯示,同時(shí)最大程度上減少服務(wù)器端的資源耗用。
用vue.js寫(xiě)單頁(yè)面應(yīng)用時(shí)，會(huì)出現(xiàn)打包后的JavaScript包非常大，影響頁(yè)面加載，我們可以利用路由的懶加載去優(yōu)化這個(gè)問(wèn)題，當(dāng)我們用到某個(gè)路由后，才去加載對(duì)應(yīng)的組件，這樣就會(huì)更加高效，實(shí)現(xiàn)代碼如下：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: resolve => require(['components/Hello.vue'], resolve)
},
{
path: '/about',
component: resolve => require(['components/About.vue'], resolve)
}
]
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談使用mpvue開(kāi)發(fā)小程序需要注意和了解的知識(shí)點(diǎn)
這篇文章主要介紹了淺談使用mpvue開(kāi)發(fā)小程序需要注意和了解的知識(shí)點(diǎn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue 項(xiàng)目中使用布局組件來(lái)創(chuàng)建頁(yè)面布局的方式是完全可行的，而且在很多項(xiàng)目中都被廣泛采用，包括像 ruoyi 這樣的框架，這篇文章主要介紹了vue?layout模板頁(yè)的使用,需要的朋友可以參考下2023-08-08
基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能
這篇文章主要介紹了基于vue+ bootstrap實(shí)現(xiàn)圖片上傳圖片展示功能,需要的朋友可以參考下2017-05-05
vue內(nèi)嵌iframe跨域通信的實(shí)例代碼
這篇文章主要介紹了vue內(nèi)嵌iframe跨域通信,主要介紹了Vue組件中如何引入iframe，vue如何獲取iframe對(duì)象以及iframe內(nèi)的window對(duì)象，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
詳解如何使用Vue-PDF在應(yīng)用中嵌入PDF文檔
在現(xiàn)代Web應(yīng)用中，PDF文檔的使用非常普遍，因?yàn)樗梢栽诟鞣N設(shè)備和操作系統(tǒng)上保持一致的外觀和格式，本文我們就來(lái)探討一下如何在Vue.js應(yīng)用中使用vue-pdf庫(kù)嵌入PDF文檔吧2023-08-08
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下2023-07-07
vue生成二維碼QR?Code的簡(jiǎn)單實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實(shí)現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
vue-seamless-scroll 實(shí)現(xiàn)簡(jiǎn)單自動(dòng)無(wú)縫滾動(dòng)且添加對(duì)應(yīng)點(diǎn)擊事件的簡(jiǎn)單整理
vue-seamless-scroll是一個(gè)基于Vue.js的簡(jiǎn)單無(wú)縫滾動(dòng)組件, 基于requestAnimationFrame實(shí)現(xiàn),配置多滿足多樣需求，目前支持上下左右無(wú)縫滾動(dòng)，單步滾動(dòng)，及支持水平方向的手動(dòng)切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實(shí)現(xiàn)自動(dòng)無(wú)縫滾動(dòng)的效果，并對(duì)應(yīng)添加點(diǎn)擊事件2023-01-01
前端開(kāi)發(fā)中,用戶(hù)體驗(yàn)是至關(guān)重要的,圖像上傳是許多 web 應(yīng)用中經(jīng)常需要的功能之一,為了提升用戶(hù)的交互體驗(yàn),拖拽上傳功能可以減少用戶(hù)的操作步驟,本文將介紹如何使用 Vue 3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片拖拽上傳功能,需要的朋友可以參考下2024-08-08
詳解使用webpack打包編寫(xiě)一個(gè)vue-toast插件
本篇文章主要介紹了詳解使用webpack打包編寫(xiě)一個(gè)vue插件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11