微服务架构与设计
重要通知
。
基本概况
微前端是一种将复杂产品业务拆分成独立应用但统筹业务体系，以此实现多个团队协作而保持互不干扰的构建部署方法策略。
微前端基础功能
- JS沙箱
- 样式隔离
- 元素隔离
- 数据通信
- 插件系统
- 预加载
micro-app案例
micro-app是由京东零售iPaaS前端研发团队推出的一款微前端框架，它从组件化的思维，基于类WebComponent进行微前端的渲染，它旨在降低上手难度、提升工作效率，并且无关技术栈，也不和业务绑定，可以用于任何前端框架。同时提供了js沙箱、样式隔离、元素隔离、预加载、数据通信、静态资源补全等一系列完善的功能。
> npm i @micro-zoe/micro-app --save
- React应用的代码示例
基座应用：index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import RouterConfig from './router/index.js';
import store from './store/index.js';
import microApp from '@micro-zoe/micro-app';
microApp.start();
const element = (
<React.StrictMode>
<Provider store={store}>
<RouterConfig />
</Provider>
</React.StrictMode>
);
ReactDOM.createRoot(
document.getElementById('root'),
).render(element);
基座应用：router.js
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import PageHome from '../views/Home/index.js';
class RouterConfig extends React.Component {
render() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={ <PageHome /> } />
</Routes>
</BrowserRouter>
)
}
}
export default RouterConfig;
基座应用：views/Home/index.js
import React from 'react';
export default function Home() {
return (
<micro-app name='app' url='http://localhost:3000/' baseroute='/'></micro-app>
)
}
子应用：router.js
import { BrowserRouter, Switch, Route } from 'react-router-dom'
class RouterConfig extends React.Component {
render() {
return (
// 设置基础路由，子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座下发的baseroute，如果没有设置baseroute属性，则此值默认为空字符串
<BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}></BrowserRouter>
)
}
}
single-spa
single-spa是通过监听 url change 事件，在路由变化时匹配到渲染的子应用并进行渲染。
qiankun
qiankun是一个快速、简单和完整的微前端解决方案，它基于single-spa进行封装。
> pnpm i qiankun -S