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

由于最近打算將所有的管理系統(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)用做按需加載，一般采用以下原則

被分割出去的代碼的加載需要一定的機(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)行處理。

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

vue按需加載的應(yīng)用

1.模塊分割

根據(jù)自己系統(tǒng)的情況，個人根據(jù)vue-router的模塊來進(jìn)行分割，

//roter配置的分割代碼import Vue from 'vue'import Router from 'vue-router'const listnav=()=> import('@/components/listnav')const adminav=()=> import('@/components/adminav')Vue.use(Router)const router = new Router({  routes:[{    path:'/listnav',    name:'listnav',    component:listnav  },  {    path:'/adminav',    name:'adminav',    component:adminav  }  ]})export default router