日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

基于vue和react的spa進(jìn)行按需加載

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

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

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

按需加載

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

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

如何按需加載

在單頁應(yīng)用做按需加載，一般采用以下原則

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

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

import()

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

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

網(wǎng)站欄目：基于vue和react的spa進(jìn)行按需加載的實(shí)現(xiàn)方法-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://www.dlmjj.cn/article/ceopoe.html