vue-router路由懶加載的實(shí)現(xiàn)（解決vue項(xiàng)目首次加載慢）
在Web應(yīng)用程序中，系統(tǒng)的瓶頸常在于系統(tǒng)的響應(yīng)速度。如果系統(tǒng)響應(yīng)速度過(guò)慢，用戶就會(huì)出現(xiàn)埋怨情緒，系統(tǒng)的價(jià)值也因此會(huì)大打折扣。因此，提高系統(tǒng)響應(yīng)速度，是非常重要的。
懶加載(Load On Demand)是一種獨(dú)特而又強(qiáng)大的數(shù)據(jù)獲取方法,它能夠在用戶滾動(dòng)頁(yè)面的時(shí)候自動(dòng)獲取更多的數(shù)據(jù),而新得到的數(shù)據(jù)不會(huì)影響原有數(shù)據(jù)的顯示,同時(shí)最大程度上減少服務(wù)器端的資源耗用。
也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。
為什么需要懶加載？
像vue這種單頁(yè)面應(yīng)用，如果沒(méi)有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁(yè)時(shí)，需要加載的內(nèi)容過(guò)多，時(shí)間過(guò)長(zhǎng)，會(huì)出啊先長(zhǎng)時(shí)間的白屏，即使做了loading也是不利于用戶體驗(yàn)，而運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力，減少首頁(yè)加載用時(shí)
簡(jiǎn)單的說(shuō)就是：進(jìn)入首頁(yè)不用一次加載過(guò)多資源造成用時(shí)過(guò)長(zhǎng)?。?！
如何實(shí)現(xiàn)？
懶加載寫(xiě)法：
非懶加載的路由配置：
還有一點(diǎn)：是我遇到的如果你遇到了就看下——就是用了懶加載后打完包直接運(yùn)行那個(gè)index.html會(huì)報(bào)錯(cuò)，報(bào)文件引用錯(cuò)誤其實(shí)是打包時(shí)候路徑配置有點(diǎn)問(wèn)題修改下就好了
如下圖：
找到build下面的webpack.prod.conf.js 添加 publicPath："./",
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家?！ ?/p>
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部下拉菜單欄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
javascript實(shí)現(xiàn)的閉包簡(jiǎn)單實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的閉包簡(jiǎn)單實(shí)現(xiàn)方法,涉及javascript閉包的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈窗猜數(shù)字游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript仿小米手機(jī)上下滑動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
javascript:void(0)用法及常見(jiàn)問(wèn)題解析
javascript:void(0)?是一個(gè)常見(jiàn)的用法,通常用于創(chuàng)建一個(gè)空操作或者防止頁(yè)面跳轉(zhuǎn),本文主要介紹了javascript:void(0)用法及常見(jiàn)問(wèn)題解析,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問(wèn)題
今天小編就為大家分享一篇解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能 具體實(shí)現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能 具體實(shí)現(xiàn)，需要的朋友可以參考一下2013-06-06
微信小程序表單驗(yàn)證插件WxValidate的二次封裝功能（終極版）
這篇文章主要介紹了微信小程序表單驗(yàn)證插件WxValidate的二次封裝功能（終極版），文中給大家提到了最終版與前面2版的不同點(diǎn),需要的朋友可以參考下2019-09-09
JavaScript對(duì)象合并實(shí)現(xiàn)步驟介紹
這篇文章主要介紹了JavaScript對(duì)象合并實(shí)現(xiàn)步驟，為什么要合并？這是我在重構(gòu)代碼的時(shí)候的一個(gè)需求。簡(jiǎn)單來(lái)說(shuō)，我會(huì)有若干個(gè)對(duì)象需要合并為一個(gè)對(duì)象。而這些對(duì)象為兩層，如果直接展開(kāi)或者賦值會(huì)涉及到深拷貝2023-01-01