基于vue和react的spa進行按需加載的實現(xiàn)方法-創(chuàng)新互聯(lián)

基于vue和react的spa進行按需加載

成都創(chuàng)新互聯(lián)公司長期為數(shù)千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為梅縣企業(yè)提供專業(yè)的網(wǎng)站設計制作、成都做網(wǎng)站，梅縣網(wǎng)站改版等技術(shù)服務。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

由于最近打算將所有的管理系統(tǒng)采用同一套登陸方法，然后在登陸后進行系統(tǒng)的切換選擇，不需要每個系統(tǒng)都去重新登陸一次，所以前端這邊思考將所有的系統(tǒng)用一套spa的應用進行構(gòu)建，但是各個系統(tǒng)的合并之后，打包后的代碼應該是相當大的，單頁需要一次性加載所有系統(tǒng)的資源，顯得不合實際，所以打算將不同系統(tǒng)的資源進行分離，再選擇后在加載該系統(tǒng)的相應資源。自己發(fā)現(xiàn)這個業(yè)務和每個系統(tǒng)的路由比較類似，因此將系統(tǒng)的配置基于vue-router或者react-router的基礎(chǔ)進行按需加載處理。因此自己了解了一下按需加載的應用和配置方案。

基于該業(yè)務大家有其他解決方案歡迎交流（ _O_ ）

按需加載

隨著單頁應用的發(fā)展，整個系統(tǒng)的所有功能都集合在一個頁面，該頁面一次性加載所有的資源，隨著系統(tǒng)的不斷擴展，因此所加載的資源會不斷的增大，雖然經(jīng)過壓縮處理，大大的減小了資源的內(nèi)容量，但是不能從本質(zhì)上減小資源內(nèi)容的增多。

其實我們的模塊對應不同的資源，就類似之前所做的多頁系統(tǒng)，不同的頁面加載對應的資源文件，所以可以參考之前的的多頁系統(tǒng)的做法，在單頁系統(tǒng)中根據(jù)不同的模塊加載其對應的資源文件。就是用戶當前需要用什么功能就只加載這個功能對應的代碼，也就是所謂的按需加載。

如何按需加載

在單頁應用做按需加載，一般采用以下原則

• 把整個系統(tǒng)劃分成一個個小功能，再按照功能的相關(guān)程度劃分為幾類。
• 把每一類合并為一個Chunk,按需加載對應的Chunk
• 對于首屏看到的內(nèi)容直接放到入口Chunk中，以降低網(wǎng)頁首次加載資源的個數(shù)
• 對于其他的模塊可以做按需加載。

被分割出去的代碼的加載需要一定的機制去觸發(fā)，也就是當用戶即將操作到對應的功能時再去加載。被分割出去的代碼的加載時機需要開發(fā)者根據(jù)自己系統(tǒng)的需求去衡量確定。
因為被分割出去的代碼加載也需要一定的時間，所以可以提前做預加載處理。

import()

在開始下面的案例之前先了解一下import(),這里的import()不同于引入模塊的import xxx from 'xxx',這里的import是指一個動態(tài)加載模塊的函數(shù)，傳入的參數(shù)就是相應的模塊，但是import()會返回一個Promise對象，因此可以在import()完成后根據(jù)其狀態(tài)進行處理。

//eg
import('/component/details').then(mod=>{
  console.log(mod)
},error=>{
  console.log(error)
})

網(wǎng)頁名稱：基于vue和react的spa進行按需加載的實現(xiàn)方法-創(chuàng)新互聯(lián)
本文路徑：http://bm7419.com/article4/ceopoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、微信公眾號、品牌網(wǎng)站制作、企業(yè)建站、App開發(fā)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)