每日优鲜供应链前端团队微前端改造文章读后感从业务上相互独立的但是服务于一个大平台，很多业务有相似之处，修改维护的成本很高

从业务上相互独立的但是服务于一个大平台，很多业务有相似之处，修改维护的成本很高。目前有个新的需求从十多个项目中抽取，基于目前的架构，每当点击来自不同系统的功能页面就要刷新一次。为了新需求X重复开发一遍这些业务功能又不现实，所以从技术角度来看，架构改造不可避免。

经过一番调研比对，我们决定使用当下比较火的 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等）并且不需要刷新页面
*（无需重构现在的代码）使用心得技术框架编写代码，现有项目中代码无需重构
*优化性能 每个独立模块代码可以按需加载不浪费额外资源
* 每个独立模块可独立运行

单体应用对比前端微服务化 普通的前端单体应用

微前端架构

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,
]

这就是 single-spa的简单使用, 当我们的浏览器url的前缀有/react的时候,程序就可以正常渲染这个应用所以,所以我们这个react应用的所有路由前缀都得有/react 未完待续 …

本文主要是学习和记录使用，原文请看juejin.cn/post/6844903943873675271

每日优鲜供应链前端团队微前端改造文章读后感