超大型项目，微前端落地方案，看完后悔来找我
时间：2023-03-28 13:27:39
HTML
绠€浠嬮鍏堜粙缁嶄竴涓嬫垜浠殑椤圭洰鑳屾櫙銆傝椤圭洰浜?018骞村惎鍔紝闀挎湡鎼佺疆锛屽鑷撮」鐩粨鏋勭浉瀵硅惤鍚庯紝鍚庢湡涓氬姟鎸佺画銆傚湪寮€鍙戣繃绋嬩腑锛屽苟娌℃湁涓嶆柇浼樺寲杩唬鏋舵瀯锛岃€屾槸鐩存帴杩涜涓氬姟寮€鍙戯紝瀵艰嚧浜嗘棩鍚庡惎鍔ㄦ參銆佷唬鐮佽€﹀悎寮恒€佸紑鍙戞晥鐜囦綆绛夎澶氶棶棰樸€傚法澶х殑椤圭洰瑙勬ā銆傞棶棰樻弿杩板綋鍓嶉」鐩噺宸茬粡杈惧埌400鏉¤矾鐢便€傛墦鍖呭悗鐨勫寘澶у皬绾︿负60MB銆傞娆″惎鍔ㄦ椂闂寸害涓?鍒嗛挓銆傜儹鏇存柊鏃堕棿绾︿负10s銆傜粡杩囦竴娈垫椂闂寸殑椤圭洰鏋舵瀯浼樺寲杩唬锛屽寘鎷矾鐢辨灦鏋勭殑鍒掑垎鍜岄噸鏋勶紝闂寰楀埌瑙ｅ喅銆傚紑鍙戜腑鐨勪竴浜涢棶棰橈紝浣嗘槸鐢变簬椤圭洰浣撻噺宸ㄥぇ锛岀洰鍓嶈繕娌℃湁鍔炴硶浠庢牴鏈笂瑙ｅ喅鑰﹀悎鎬у己銆佸惎鍔ㄦ參鐨勯棶棰橈紝鎵€浠ュ噯澶囬噰鐢ㄥ井鍓嶇鐨勬柟妗堝椤圭洰杩涜璇︾粏鎷嗗垎锛屾渶缁堣揪鍒颁竴涓洰鐨勶紝灏辨槸瑙ｅ喅浠ｇ爜涔嬮棿鐨勮€﹀悎闂锛岃В鍐抽」鐩紑鍙戞晥鐜囩殑闂锛屾槑纭垝鍒嗗悇涓瓙搴旂敤锛屾敮鎸佸崟鐙殑閮ㄧ讲鏂规銆傛垜浠」鐩殑鏍稿績鏄満鏅?鎺у埗+鏀粯浜х敓鐨勬瘡涓€琛岋紝鍚庣画鐨勮鍒掓槸鎸夌収杩欎笁閮ㄥ垎鍒掑垎鎴愬瓙搴旂敤鐨勶紝鎵€浠ラ噰鐢ㄧ殑澶ф鏋惰鍒掓槸鍏堝畾鐩爣鍜岃鍒掞紝鐒跺悗閫愭寰€杩欎釜鏂瑰悜閫愭寮€鍙戞牳蹇冮€昏緫鍥綯D鍦烘櫙-->鎺у埗-->鏀粯鍦烘櫙鏄垜浠湁鐨勪竴涓瓙搴旂敤姣斿閰掑簵銆佺伀杞︾殑鍦烘櫙绠℃帶鏄竴涓瓙搴旂敤锛屽彲浠ユ帴鏀舵潵鑷満鏅殑鍙傛暟鏉ュ憟鐜颁笉鍚岀殑鎺у埗椤甸潰銆傛敹閾舵満鏄竴涓负鍦烘櫙鎻愪緵鏀粯鑳藉姏瑙ｅ喅鏂规鐨勫瓙搴旂敤銆傛垜浠娇鐢ㄦ瘮杈冩垚鐔熺殑鏂规Qinakun锛屽凡缁忔椿璺冨湪绀惧尯銆傛椂闂撮暱浜嗭紝鏈変竴瀹氱殑绋冲畾鎬с€傚紑鍙戞帴鍏ユ枃妗ｅ拰绀惧尯涓彲鑳介亣鍒扮殑涓€浜涘紓甯搁棶棰橀兘鏈夊緢濂界殑瑙ｇ瓟銆傛帴涓嬫潵鐪嬩竴涓嬫垜浠殑鍏蜂綋鎿嶄綔锛屾⒊鐞嗕竴涓嬪綋鍓嶉渶瑕佹媶鍒嗗瓙搴旂敤娑夊強鐨勯棶棰樺拰渚濊禆锛屼娇鐢ㄧ殑缁勪欢渚濊禆浜庝緷璧栭€傞厤鏂规涓婄殑渚濊禆鏍峰紡銆備緷璧栧垝鍒嗙殑渚濊禆璺敱鍘绘帀浜嗗綋鍓嶅簲鐢ㄤ箣澶栫殑浠ｇ爜---鐦﹁韩鎿嶄綔鍒涘缓浜嗕竴涓柊鐨勬灦鏋勬潵鎵胯浇瀛愬簲鐢ㄤ娇鐢╮eact-scripts閲嶆柊閰嶇疆cra蹇€熸瀯寤烘瀯寤虹幆澧冧娇鐢ㄧ殑渚濊禆锛屾瘮濡倀s銆乴ess銆乿w/vh绛夐渶瑕佺敤鍒扮殑閫傞厤鏂规锛屾牴鎹富宸ョ▼涓娇鐢ㄧ殑渚濊禆鏋勫缓瀛愬簲鐢ㄧ殑鍖呫€傚敖閲忎笉瑕佹敼鍔ㄥお澶э紝浠ラ槻瀛愰」鐩惎鍔ㄥけ璐ワ紝鎸夌収qiankun鏂囨。涓殑鎻愮ず杩涜淇敼銆備富搴旂敤鍜屽瓙搴旂敤涓诲簲鐢ㄦ敼閫犱竴鑸湪鍏ュ彛鏂囦欢涓璱mport{registerMicroApps,start}from'qiankun'registerMicroApps([{name:'webapp-qkrechargecenter',//瀵瑰簲鐨勫瓙搴旂敤鍖呭叆鍙ｅ悕绉?'//localhost:3000/',//瀛愬簲鐢ㄥ鍣ㄥ煙鍚?'#webapp-qkrechargecenter',//鎵樼鐨勫鍣ㄥ瓙搴旂敤activeRule:(location)=>{returnlocation.pathname.startsWith('/nav/normal')//娓叉煋瀛愬簲鐢ㄧ殑璺敱鍖归厤},props:{//浼犻€掔粰鐨勭粍浠舵垨鍙傛暟瀛愬簲鐢ㄧ瓑PrivatePayment,Test1}}])start()鍦ㄤ富搴旂敤涓紝鎴戜滑闇€瑕佸垱寤轰竴涓鍣ㄨ矾鐢遍〉闈紝杩欐槸鎴戜滑鐨勫満鏅叆鍙ｏ紝杩欓噷娓叉煋鐨勬槸鎴戜滑鐨勫瓙搴旂敤importReact锛寋useEffect}from'react'import{start}from'qiankun'constRechargeCenterPage:React.FC=props=>{useEffect(()=>{return()=>{console.log('Uninstall')}},[])return
}exportdefaultRechargeCenterPage瀛愬簲鐢ㄦ灦鏋勬敼閫犺繖閲屽彧浼氶拡瀵瑰井鍓嶇涔嬮棿鐨勪氦浜掕繘琛屼慨鏀癸紝鍏朵粬閰嶇疆鏍规嵁鑷繁鐨勫叿浣撹鍒?***閲嶅啓react-scripts鐨勯粯璁ら厤缃?/constappPackageJson=require('../package.json')module.exports=(config,env)=>{config.output.library=`${appPackageJson.name}-[name]`config.output.libraryTarget='umd'config.output.jsonpFunction=`webpackJsonp_${appPackageJson.name}`,杩斿洖閰嶇疆;};瀛愬簲鐢ㄥ叆鍙ｆ枃浠惰浆鎹mportReactDOMfrom"react-dom";import*asReactfrom"react";importRouteCompfrom"./routes/routerList";functionrender(props){const{container}=props;ReactDOM.render(
,container?container.querySelector('#root'):document.querySelector('#root'));}if(!window.__POWERED_BY_QIANKUN__){render({});}/***bootstrap鍙細鍦ㄥ井搴旂敤鍒濆鍖栨椂璋冪敤涓€娆★紝涓嬫寰簲鐢ㄥ啀娆¤繘鍏ユ椂锛屼細鐩存帴璋冪敤mounthook锛屼笉浼氳Е鍙慴ootstraprepeatly*閫氬父鎴戜滑鍙互鍦ㄨ繖閲屽垵濮嬪寲涓€浜涘叏灞€鍙橀噺锛屾瘮濡傚湪unmount闃舵涓嶄細琚攢姣佺殑搴旂敤绾х紦瀛樸€?/exportasyncfunctionbootstrap(){console.log("reactappbootstraped");}/***姣忔搴旂敤杩涘叆閮戒細璋冪敤mount鏂规硶锛岄€氬父鎴戜滑鍦ㄨ繖閲岃Е鍙戝簲鐢ㄧ殑娓叉煋鏂规硶*/exportasyncfunctionmount(props){render(props);}/***姣忔搴旂敤琚垏鍑?鍗歌浇鏃堕兘浼氳皟鐢ㄧ殑鏂规硶锛岄€氬父杩欓噷鎴戜滑浼氬嵏杞藉井搴旂敤鐨勫簲鐢ㄥ疄渚?/exportasyncfunctionunmount(props){ReactDOM.unmountComponentAtNode(props.container?props.container.querySelector("#root"):document.getElementById("root"));}/***鍙€夌殑鐢熷懡鍛ㄦ湡閽╁瓙锛屽彧鏈夊綋寰簲鐢ㄨ閫氳繃loadMicroApp鏂规硶鍔犺浇*/exportasyncfunctionupdate(props){console.log("updateprops",props);}瀛愬簲鐢ㄨ矾鐢辨敼閫犺繖閲屾垜鐩存帴浣跨敤react-router-config娓叉煋璺敱銆傚鏋滄湁鍏朵粬鐗规畩閰嶇疆锛屽彲浠ヨ嚜琛岄厤缃€備粠'react'瀵煎叆React浠?react-router-config'瀵煎叆{renderRoutes}浠?react-router-dom'瀵煎叆{BrowserRouter浣滀负璺敱鍣▆浠?app/index/index'瀵煎叆paymentRechargePrivateView浠?app/paymentRechargePrivateView'constNoFound=(props)=>{returnNoFound
}const璺敱鍣↙ist=[{path:'/views/recharge/center',component:rechange,name:'RechargeCenter',exact:true,},{path:'/views/paymentRechargePrivateView',component:paymentRechargePrivateView,name:"鍏呭€间腑蹇冧釜浜烘秷璐规敹閾舵満",exact:true,},{component:NoFound,}]//閲嶇偣鏄痓asename闇€瑕佸尮閰嶄富搴旂敤activeRule瀵瑰簲鐨勮矾寰刢onstRouteComp=(props)=>{renderRoutes(routerList,props)}exportdefaultRouteComp瀛愬簲鐢ㄩ厤缃法鍩熷鐞?***config-overrides.js*overridereact-scriptsdefault閰嶇疆*/constconfigDev=require("./config/webpack.config.dev");constconfigProd=require("./config/webpack.config.prod");module.exports={webpack:functionoverride(config,env){if(env=="development"){returnconfigDev(config,env)}else{returnconfigProd(config,env)}},devServer:(configFunction)=>{returnfunction(proxy,allowedHost){constconfig=configFunction(proxy,allowedHost);閰嶇疆.open=false;閰嶇疆.hot=false;config.headers={'Access-Control-Allow-Origin':'*',//璁剧疆鍏佽璺ㄥ煙};杩斿洖閰嶇疆锛泒;},};鎬讳綋鎬濊矾灏辨槸杩欐牱鎷嗗垎锛屼腑闂撮亣鍒颁簡寰堝闂锛屼笅闈㈠垎浜竴涓嬶紝濡傛灉浣犱篃鏈夎繖绉嶅巻鍙叉偁涔呯殑椤圭洰鐨勬媶鍒嗭紝澶ф鐜囦細閬囧埌姣旇緝楹荤儲鐨勫疄鐜扮洰鏍囪繃绋嬩腑鐨勯棶棰樿烦杞棶棰樼殑鍘熷洜鏄垜浠殑鏃ц矾鐢卞悕绉版湁涓€浜涜嚜宸辩殑鍓嶇紑瑙勫垯銆傚綋鏃х殑璺敱瑙勫垯鍖归厤鍒版柊鐨勮矾鐢辫鍒欐椂锛屽嚭鐜板紓甯革紝瀵艰嚧璺宠浆鑴辩褰撳墠瀛愬簲鐢ㄥ鍣ㄦ椂鍙戠敓璺宠浆銆傜櫧灞忕殑瑙ｅ喅鏂规硶鏄湪涓诲簲鐢ㄤ腑閰嶇疆涓€涓搴旂殑璺敱锛岃瀛愬簲鐢ㄤ腑鐨勮烦杞矾寰勬寚鍚戝悓涓€涓鍣ㄩ〉闈紝鐩稿綋浜庨噸鏂板姞杞藉瓙搴旂敤瀹瑰櫒锛岃繖鏍峰氨涓嶄細浜х敓椤甸潰浜嗚烦杞繃绋嬩腑璺宠浆閿欒瀵艰嚧鐧藉睆闂//涓诲簲鐢?/鍙傝€冨悓涓€椤甸潰RechargeCenter//瀛愬簲鐢╟onstrouterList=[{path:'/views/recharge/center',//杩欎釜璺緞娉ㄥ唽鍦ㄤ富搴旂敤缁勪欢锛歳echange,name:'鍏呭€间腑蹇?,exact:true,},{path:'/views/paymentRechargePrivateView',//璇ヨ矾寰勫湪涓诲簲鐢ㄧ粍浠朵腑娉ㄥ唽锛歱aymentRechargePrivateView,name:"鍏呭€间腑蹇冧釜浜烘秷璐规敹閾跺彴",exact:true,},{component:NoFound,}]瀛愬簲鐢ㄤ娇鐢ㄤ富搴旂敤浼犻€掔殑鍑芥暟缁勪欢浣跨敤寮傚父寮傚父鍥?/>娉ㄦ剰鍙湁鍑芥暟缁勪欢浼犻€掔粰瀛愬簲鐢ㄤ娇鐢紝浼氭湁寮傚父鎻愮ず锛岀被缁勪欢娌℃湁銆傚師鍥犳槸褰撳墠浣跨敤鐨勫湴鏂瑰拰浼犲叆鐨勭粍浠朵笉鏄悓涓€涓疄渚嬶紝闇€瑕佸湪鍚屼竴涓疄渚嬩笅瑙ｆ瀽hooks缁勪欢鏂规硶浣跨敤webpack鐨別xternals浣跨敤鍚屼竴涓猺eact锛屾敼閫犲瓙搴旂敤鍜屼富搴旂敤鍚屾椂//Mainapplicationexternals:{'react':'React','react-dom':'ReactDOM',},//Sub-applicationconfig.externals={'react':'React','react-dom':'ReactDOM',}鍦ㄤ富搴旂敤鐨勫叆鍙ｆ枃浠朵腑寮曞叆react鐨刢dn閾炬帴銆傛敞鎰忎娇鐢ㄤ笌鏈湴鐩稿悓鐨勭増鏈紝闃叉鍑虹幇鍏煎鎬ч棶棰?scriptsrc="https://unpkg.com/react@16.13.1/umd/react.development.js">缁撴潫浠ヤ笂灏辨槸鎴戜滑椤圭洰鎷嗗垎鐨勬€讳綋鎬濊矾鍜屽叿浣撳疄鐜扮涓€瀛ｇ殑璁″垝銆傚悗闈㈣偗瀹氫細鏈夋洿澶氱殑闂锛屾墍浠ヤ笉鍑烘剰澶栬繕鏈夌浜屽鍜岀涓夊銆傘€傘€傝皝鏈夌壒鍒ぇ鐨勯」鐩彲浠ュ叧娉ㄨ繖涓垜浠潵鐪嬬湅杩欑鎬濊矾锛屾寜鐓т笟鍔＄嚎鎴栬€呯浉瀵圭嫭绔嬬殑妯″潡锛屽皢瀛愬簲鐢ㄥ崟鐙媶瑙ｃ€傚鏋滃ぇ瀹舵湁鏇村ソ鐨勮В鍐虫柟妗堝彲浠ュ湪璇勮鍖鸿璁簙鏈€鍚巭鍛ㄦ湯鎰夊揩馃尮鏈枃鐢眒dnice澶氬钩鍙板彂甯?/p>
