vue-router路由懶加載的實(shí)現(xiàn)（解決vue項(xiàng)目首次加載慢）
在Web應(yīng)用程序中，系統(tǒng)的瓶頸常在于系統(tǒng)的響應(yīng)速度。如果系統(tǒng)響應(yīng)速度過慢，用戶就會(huì)出現(xiàn)埋怨情緒，系統(tǒng)的價(jià)值也因此會(huì)大打折扣。因此，提高系統(tǒng)響應(yīng)速度，是非常重要的。
懶加載(Load On Demand)是一種獨(dú)特而又強(qiáng)大的數(shù)據(jù)獲取方法,它能夠在用戶滾動(dòng)頁面的時(shí)候自動(dòng)獲取更多的數(shù)據(jù),而新得到的數(shù)據(jù)不會(huì)影響原有數(shù)據(jù)的顯示,同時(shí)最大程度上減少服務(wù)器端的資源耗用。
也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。
為什么需要懶加載？
像vue這種單頁面應(yīng)用，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁時(shí)，需要加載的內(nèi)容過多，時(shí)間過長(zhǎng)，會(huì)出啊先長(zhǎng)時(shí)間的白屏，即使做了loading也是不利于用戶體驗(yàn)，而運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時(shí)
簡(jiǎn)單的說就是：進(jìn)入首頁不用一次加載過多資源造成用時(shí)過長(zhǎng)?。?！
如何實(shí)現(xiàn)？
懶加載寫法：
非懶加載的路由配置：
還有一點(diǎn)：是我遇到的如果你遇到了就看下——就是用了懶加載后打完包直接運(yùn)行那個(gè)index.html會(huì)報(bào)錯(cuò)，報(bào)文件引用錯(cuò)誤其實(shí)是打包時(shí)候路徑配置有點(diǎn)問題修改下就好了
如下圖：
找到build下面的webpack.prod.conf.js 添加 publicPath："./",
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家?！ ?/p>
相關(guān)文章
javascript之with的使用(阿里云、淘寶使用代碼分析)
這篇文章主要介紹了javascript之with的使用(阿里云、淘寶使用代碼分析)，主要是發(fā)現(xiàn)了阿里云使用了這段比較有B格的代碼，所以說下這個(gè)怎么樣2016-10-10
fullPage.js 是一個(gè)基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站，本文主要介紹了fullpage.js全屏滾動(dòng)的具體使用方法，感興趣的可以了解一下2021-09-09
下面小編就為大家?guī)硪黄狫S字符串按逗號(hào)和回車分隔的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了JS Select下拉框的相關(guān)資料，支持輸入模糊查詢，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
IScroll5 中文API參數(shù)說明和調(diào)用方法
IScroll是移動(dòng)頁面上被使用的一款仿系統(tǒng)滾動(dòng)插件。IScroll5相對(duì)于之前的IScroll4改進(jìn)了許多，使得大家可以更方便的定制所需的功能了。2016-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序左右滑動(dòng)刪除事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
javascript 動(dòng)態(tài)table添加colspan\rowspan 參數(shù)的方法
動(dòng)態(tài)的給某個(gè)表對(duì)象添加列屬性和行屬性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。2009-07-07
這篇文章主要給大家介紹了關(guān)于微信小程序位置授權(quán)處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
淺析JavaScript中回調(diào)地獄與asyn函數(shù)和await函數(shù)原理
這篇文章主要介紹了JavaScript中回調(diào)地獄與asyn函數(shù)和await函數(shù)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
javascript基于原型鏈的繼承及call和apply函數(shù)用法分析
這篇文章主要介紹了javascript基于原型鏈的繼承及call和apply函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript中繼承的概念、創(chuàng)建方法以及call和apply函數(shù)的功能與使用技巧,需要的朋友可以參考下2016-12-12