技術(shù)選型
經(jīng)過各種技術(shù)調(diào)研我們最終選擇的方案是基于 Single-SPA 來實(shí)現(xiàn)我們的前端微服務(wù)化.
Single-SPA
一個用于前端微服務(wù)化的JavaScript前端解決方案
使用Single-SPA之后,你可以這樣做:
- (兼容各種技術(shù)棧)在同一個頁面中使用多種技術(shù)框架(React, Vue, AngularJS, Angular, Ember等任意技術(shù)框架),并且不需要刷新頁面.
- (無需重構(gòu)現(xiàn)有代碼)使用新的技術(shù)框架編寫代碼,現(xiàn)有項目中的代碼無需重構(gòu).
- (更優(yōu)的性能)每個獨(dú)立模塊的代碼可做到按需加載,不浪費(fèi)額外資源.
- 每個獨(dú)立模塊可獨(dú)立運(yùn)行.
下面是一個微前端的演示頁面 (你可能需要科學(xué)的上網(wǎng))
https://single-spa.surge.sh/
以上是官方例子,但是官方例子中并沒有解決一個問題.就是各種技術(shù)棧的路由實(shí)現(xiàn)方式大相徑庭,如何做到路由之間的協(xié)同?
后續(xù)文章會講解,如何解決這樣的問題.
單體應(yīng)用對比前端微服務(wù)化
普通的前端單體應(yīng)用
image
微前端架構(gòu)
image
Single-SPA的簡單用法
1.創(chuàng)建一個HTML文件
<html>
<body>
<div id="root"></div>
<script src="single-spa-config.js"></script>
</body>
</html>
2.創(chuàng)建single-spa-config.js 文件
// single-spa-config.js
import * as singleSpa from 'single-spa';
// 加載react 項目的入口js文件 (模塊加載)
const loadingFunction = () => import('./react/app.js');
// 當(dāng)url前綴為 /react的時候.返回 true (底層路由)
const activityFunction = location => location.pathname.startsWith('/react');
// 注冊應(yīng)用
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') {
// 開發(fā)環(huán)境直接渲染
ReactDOM.render(<RootComponent />, document.getElementById('root'))
}
//創(chuàng)建生命周期實(shí)例
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的簡單使用,
當(dāng)我們的瀏覽器url的前綴有/react的時候,程序就可以正常渲染這個應(yīng)用
所以,所以我們這個react應(yīng)用的所有路由前綴都得有/react
未完待續(xù) ...
相關(guān)文章
前端微服務(wù)化解決方案7 - 靜態(tài)數(shù)據(jù)共享
