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

时间 2019-11-10

标签每日供应链前端团队改造文章读后感繁體版

原文原文链接

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

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

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

微前端架构

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.im/post/5d7f702ce51d4561f777e258 react