每日優鮮供應鏈前端團隊微前端改造文章讀後感

時間 2019-11-10

標籤每日供應鏈前端團隊改造文章讀後感简体版

原文原文鏈接

從業務上相互獨立的可是服務於一個大平臺，不少業務有類似之處，修改維護的成本很高。目前有個新的需求從十多個項目中抽取，基於目前的架構，每當點擊來自不一樣系統的功能頁面就要刷新一次。爲了新需求X重複開發一遍這些業務功能又不現實，因此從技術角度來看，架構改造不可避免。html

通過一番調研比對，咱們決定使用當下比較火的 SingleSpa（alili.tech/archive/110…）來完成改造（iframe方案嘗試過，不太適合咱們的場景），目前改造已完成，咱們實現瞭如下效果：只有一個不包含子項目（子項目指的是那十多個業務）資源的主項目，主項目只有一個html入口，子項目經過主項目來按需加載，子系統間切換再也不刷新；菜單欄、登陸、退出等功能都從子項目剝離，寫在主項目裏，再有相關改動只需修改主項目，包括錯誤監控、埋點等行爲，只需處理一個主項目，十幾個子項目再也不須要處理；子項目本來須要加載的公共部分（如vue、vuex、vue-router、ivew/element、私有npm包等），所有由主項目調度，配合webpack的externals功能經過外鏈的方式按需加載，一旦有一個子項目加載過，下一個子項目就不須要再加載，這樣一來每一個子項目的dist文件裏就只有子項目本身的業務代碼（最終子項目包的體積縮小了80%，只有幾十k），項目實際加載速度快了不少，肉眼可見；子項目並無從新開發，只是進行了一些改造，接入了微前端這套架構，因此新需求X的開發成本也極大的下降了，接入功能同時可供將來新增子項目使用；咱們的項目有本身的tab系統（相似瀏覽器的tab頁籤），這些tab頁籤經過keep-alive和一系列對緩存的處理，使其體驗接近原生瀏覽器tab。前端

其實最最主要的是這個Single-SPA由於使用以後有如下幾個好處
* 兼容各類技術棧，能夠在同一個頁面中使用多種技術框架（React VUe AngularJs Angular Ember等）而且不須要刷新頁面
*（無需重構如今的代碼）使用心得技術框架編寫代碼，現有項目中代碼無需重構
*優化性能 每一個獨立模塊代碼能夠按需加載不浪費額外資源
* 每一個獨立模塊可獨立運行
複製代碼

單體應用對比前端微服務化 普通的前端單體應用vue

微前端架構

Single-SPA的簡單用法

1.建立一個HTML文件

<html>
<body>
    <div id="root"></div>
    <script src="single-spa-config.js"></script>
</body>
</html>
複製代碼

2.建立single-spa-config.js 文件

//single-spa-config.js文件
import * as singleSpa from 'single-spa';

//加載react項目的入口js文件（模塊加載）
const loadingFunction = () => import('./react/app.js');

//當前URL前綴爲 /react 的時候 返回true （底層路由）
const activityFunction = location => location.pathname.startsWith('react')

//註冊應用
singleSpa.registerApplication('react', loadingFunction, activityFunction);

//singleSpa啓動\
singleSpa.start();

複製代碼

3.封裝React項目的渲染出口文件

咱們把渲染react的入口文件修改爲這樣,即可接入到single-spa

import React from 'react'
import ReactDOM from 'react-dom'
import singleSpaReact from 'single-spa-react'
import RootComponent from './root.component'

if(process.env.NODE_ENV === 'development') {
    //開發環境直接渲染
    ReactDOM.render(<RootComponent />,document.getElementById('root'))
}
//建立生命週期
const reactLifecycles = singleSpaReact({
    React,
    ReactDOM,
    rootComponent: RootComponent
    domElementGetter: ()=> document.getElementById('root')
})

//項目啓動的鉤子
export const bootstrap = [
    reactLifecycles.bootstrap,
]
//項目啓動後的鉤子
export const mount = [
    reactLifecycles.mount,
]
//項目卸載的鉤子
export const unmount = [
    reactLifecycles.unmount,
]
複製代碼