文章轉發自: alili.tech
技術選型
經過各種技術調研我們最終選擇的方案是基於 Single-SPA 來實現我們的前端微服務化.
Single-SPA
一個用於前端微服務化的JavaScript前端解決方案
使用Single-SPA之後,你可以這樣做:
- (相容各種技術棧)在同一個頁面中使用多種技術框架(React, Vue, AngularJS, Angular, Ember等任意技術框架),並且不需要重新整理頁面.
- (無需重構現有程式碼)使用新的技術框架編寫程式碼,現有專案中的程式碼無需重構.
- (更優的效能)每個獨立模組的程式碼可做到按需載入,不浪費額外資源.
- 每個獨立模組可獨立執行.
下面是一個微前端的演示頁面 (你可能需要科學的上網) single-spa.surge.sh/
以上是官方例子,但是官方例子中並沒有解決一個問題.就是各種技術棧的路由實現方式大相徑庭,如何做到路由之間的協同? 後續文章會講解,如何解決這樣的問題.
單體應用對比前端微服務化
普通的前端單體應用
微前端架構
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();
複製程式碼封裝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,
]
複製程式碼這就是 single-spa的簡單使用, 當我們的瀏覽器url的字首有
/react的時候,程式就可以正常渲染這個應用 所以,所以我們這個react應用的所有路由字首都得有/react未完待續 ...