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

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

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

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

按需加載

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

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

如何按需加載

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

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

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

import()

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

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

網頁名稱：基于vue和react的spa進行按需加載的實現方法-創新互聯
本文路徑：http://vcdvsql.cn/article4/ceopoe.html

成都網站建設公司_創新互聯，為您提供網站改版、微信公眾號、品牌網站制作、企業建站、App開發、ChatGPT

廣告

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