前端單頁應用微服務化解決方案2 - Single-SPA

時間 2019-11-07

標籤前端單頁應用微服解決方案 single spa 简体版

原文原文鏈接

文章轉發自: alili.techjavascript

技術選型

通過各類技術調研咱們最終選擇的方案是基於 Single-SPA 來實現咱們的前端微服務化.html

Single-SPA

一個用於前端微服務化的JavaScript前端解決方案前端

使用Single-SPA以後,你能夠這樣作:java

(兼容各類技術棧)在同一個頁面中使用多種技術框架(React, Vue, AngularJS, Angular, Ember等任意技術框架),而且不須要刷新頁面.
(無需重構現有代碼)使用新的技術框架編寫代碼,現有項目中的代碼無需重構.
(更優的性能)每一個獨立模塊的代碼可作到按需加載,不浪費額外資源.
每一個獨立模塊可獨立運行.

下面是一個微前端的演示頁面 (你可能須要科學的上網) single-spa.surge.sh/react

以上是官方例子,可是官方例子中並無解決一個問題.就是各類技術棧的路由實現方式截然不同,如何作到路由之間的協同? 後續文章會講解,如何解決這樣的問題.git

單體應用對比前端微服務化

普通的前端單體應用

微前端架構

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-spagithub

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, ] 複製代碼