什么是微前端

微前端是一种软件架构，可以将前端应用拆解成一些更小的能够独立开发部署的微型应用，然后再将这些微应用进行组合使其成为整体应用的架构模式。

微前端架构类似于组件架构，但不同的是，组件不能独立构建和发布，但是微前端中的应用是可以的。

微前端架构与框架无关，每个微应用都可以使用不同的框架。

微前端的价值

1、增量迁移

迁移是一项非常耗时且艰难的任务，比如有一个管理系统使用 AngularJS 开发维护已经有三年时间，但是随时间的推移和团队成员的变更，无论从开发成本还是用人需求上，AngularJS 已经不能满足要求，于是团队想要更新技术栈，想在其他框架中实现新的需求，但是现有项目怎么办？直接迁移是不可能的，在新的框架中完全重写也不太现实。

使用微前端架构就可以解决问题，在保留原有项目的同时，可以完全使用新的框架开发新的需求，然后再使用微前端架构将旧的项目和新的项目进行整合。这样既可以使产品得到更好的用户体验，也可以使团队成员在技术上得到进步，产品开发成本也降到的最低。

2、独立发布

在目前的单页应用架构中，使用组件构建用户界面，应用中的每个组件或功能开发完成或者 bug 修复完成后，每次都需要对整个产品重新进行构建和发布，任务耗时操作上也比较繁琐。

在使用了微前端架构后，可以将不能的功能模块拆分成独立的应用，此时功能模块就可以单独构建单独发布了，构建时间也会变得非常快，应用发布后不需要更改其他内容应用就会自动更新，这意味着你可以进行频繁的构建发布操作了。

3、允许单个团队做出技术决策

因为微前端构架与框架无关，当一个应用由多个团队进行开发时，每个团队都可以使用自己擅长的技术栈进行开发，也就是它允许适当的让团队决策使用哪种技术，从而使团队协作变得不再僵硬。

图片源自：Bit: Component-driven development platform

微前端的使用场景：

拆分巨型应用，使应用变得更加可维护
兼容历史应用，实现增量开发

实现微前端架构的四个问题

1、多个微应用如何进行组合？

实际上微前端中的每个微应用最终都会被打包为模块，在浏览器中通过加载这些模块来运行不同的微应用。通过模块化的方式来运行不同的微应用可以防止微应用之间的 JavaScript 和 CSS 发生冲突。

在微前端架构中，除了存在多个微应用以外，还存在一个容器应用，每个微应用都需要被注册到容器应用中。通过容器应用来管理微应用的加载、运行以及卸载。

2、在微应用中如何实现路由？

在微前端架构中，当路由发生变化时，容器应用首先会拦截路由的变化，根据路由匹配微前端应用，当匹配到微应用以后，再启动微应用路由，匹配具体的页面组件，方式微应用之间的路由发生冲突。

3、微应用与微应用之间如何实现状态共享?

在微应用中可以通过发布/订阅模式实现状态共享，比如使用 RxJS，它可以在任意框架中使用。

4、微应用与微应用之间如何实现框架和库的共享？

很多情况下，多个微应用都是使用相同框架的，例如 React、 Vue。

在微前端架构中使用模块化方式加载应用，在最新的模块化规范中新增了 import-map 特性。这个特性允许加载网络模块，而不是一定要将模块下载到本地，开发者只需要提前配置好模块名称和模块地址就好了，这样，每个微应用都可以引用提前配置好的公共模块了，从而解决多个微应用之间框架共享的问题。

注意，还需要修改微应用本身的 webpack 配置，通过 webpack 配置的 externals 属性告诉 webpack 在打包应用时，哪些模块不需要被打包。

注意：原生 import-map 特性的浏览器兼容性不够好，可以使用 systemjs 提供的类似功能。

Systemjs 模块化解决方案

概述

在微前端架构中，每一个微应用被打包为模块，在浏览器中加载并运行这些模块。

但是目前为止浏览器对模块化的支持（兼容性）还不够好，需要使用 systemjs 实现浏览器中的模块化。

systemjs 是一个用于实现动态模块加载器的 JavaScript 库

systemjs 有属于自己的模块化规范（System.register），不过在开发阶段我们可以使用 ES Module 规范，然后使用 webpack 将其转换为 systemjs 支持的模块规范。

体验

案例：通过 webpack 将 react 应用打包为 systemjs 模块，再通过 systemjs 在浏览器中加载模块。

初始化项目

mkdir system-react
cd system-react
npm init -y
# 安装依赖
npm install webpack@5.17.0 webpack-cli@4.9.1 webpack-dev-server@3.11.2 html-webpack-plugin@4.5.1 @babel/core@7.12.10 @babel/cli@7.12.10 @babel/preset-env@7.12.11 @babel/preset-react@7.12.10 babel-loader@8.2.2

配置 webpack

新建 webpack.config.js，主要注意的配置：

output.library.type（原 output.libraryTarget）：将 ES Module 规范的模块转化为 systemjs 模块规范
plugins：HtmlWebpackPlugin 插件配置 inject:false，禁止自动注入入口文件，因为要在模板文件中通过 systemjs 手动引入
externals：配置不需要打包的公共模块

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: 'development',entry: './src/index.js',output: {filename: 'index.js',path: path.join(__dirname, 'build'),// 将 ES Module 规范的模块转化为 systemjs 规范的模块library: {type: 'system'}},devtool: 'source-map',devServer: {port: 9000,contentBase: path.join(__dirname, 'build'), // 指定静态资源文件夹historyApiFallback: true // 允许页面失效（如刷新页面）的时候仍然能够使用 React 的 BrowserRouter},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env', '@babel/preset-react']}}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html',inject: false // 禁止自动将打包的入口文件通过 <script> 标签引入到模板文件中（微前端使用 systemjs 加载模块）})],// 配置不需要被打包的公共模块externals: ['react', 'react-dom']
}

编写 React 组件

创建 src/App/js：

// src\App.js
import React from 'react'export default function App() {return <div>App works</div>
}

创建 src/index.js：

// src\index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'ReactDOM.render(<App />, document.getElementById('root'))

配置模板文件

创建 src/index.html 文件，里面主要做的事情：

引入 systemjs，用于加载模块
引入公共模块：公共模块在微前端架构中统一加载，微应用中不需要安装和打包，所以需要配置单独运行微应用时的公共模块地址。由于原生 import-map 兼容性不够，所以使用 systemjs 提供的类似功能。
添加 React 挂载根节点（root）
通过 systemjs 加载 React 内容模块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>systemjs-react</title><!-- 1. 引入 systemjs --><script src="https://cdn.jsdelivr.net/npm/systemjs@6.11.0/dist/system.min.js"></script><!-- 2. 引入公共模块 --><!-- 使用 systemjs 提供的用于代替原生 import-map 特性的功能 --><script type="systemjs-importmap">{"imports": {"react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js","react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"}}</script></head><body><!-- 3. React 挂载根节点 --><div id="root"></div><!-- 4. 加载模块 --><script>// 加载完 systemjs 后会在全局添加一个 System 对象// 根据 webpack 配置，入口文件会打包到与 index.html 相同路径下System.import('./index.js')</script></body>
</html>

修改脚本并运行

package.json

"scripts": {"start": "webpack serve"
},

运行 npm start

微前端解决方案初探 01 微前端介绍、价值、如何实现、systemjs 模块化方案相关推荐

微前端解决方案初探 02 微前端框架 single-spa
single-spa 概述 single-spa 是一个实现微前端架构的框架. 在 single-spa 框架中有三种类型的微前端应用: single-spa application / parcel ...
微前端解决方案初探 03 模块联邦（概述、案例介绍、应用初始化）
模块联邦概述模块联邦(Module Federation)是 Webpack 5 中新增的一项功能,可以实现跨应用共享模块. 以下图为例: 在 A 应用中有一个 sayHelloFromA 方法,在 ...
深度解析高通RF360移动射频前端解决方案
前段时间,微波射频网报道了高通新推出的RF360射频前端解决方案(查看详情),新产品首次实现了单个移动终端支持全球所有4G LTE制式和频段的设计.接下来让我们一起深度解析RF360全新移动射频前端解 ...
乾坤微前端_微前端架构初探以及我的前端技术盘点
前言最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
registermodule 微前端_麦饭：可能是你见过最酷最简单的微前端解决方案
目前国内最火的微前端框架是来自阿里的qiankun,以及它底层的single-spa,但是,这是最终形态吗?在我看来并不是.无论是single-spa,还是qiankun,都有比较强的协议规定,对原有 ...
已开源！ icestark 助力业务快速落地微前端解决方案
作者|刘雄(大果) 出品|阿里巴巴新零售淘系技术部 2017 年中旬,飞冰(ICE)团队接到一个叫做「阿里创作平台」的项目,这个产品为创作者提供了入驻.帐号管理.内容管理.内容发布.粉丝运营.数据分析 ...
目标是最完善的微前端解决方案 - qiankun 2.0
距 qiankun 开源已过去了 11 个月,距上次官方发声已过去 8 个月. Announcing qiankun@2.0 2019 年 6 月,微前端框架 qiankun 正式发布了 1. ...
可能是你见过的最完善的微前端解决方案
可能是你见过的最完善的微前端解决方案参考文章: (1)可能是你见过的最完善的微前端解决方案 (2)https://www.cnblogs.com/lhb25/p/the-last-micro-fro ...
前端微服务化解决方案
作者:Alili前端大暴炸的前端微服务化解决方案系列链接:https://www.jianshu.com/u/2aa7a9ad33ad 来源:简书著作权归作者所有.商业转载请联系作者获得授权,非商 ...

微前端解决方案初探 01 微前端介绍、价值、如何实现、systemjs 模块化方案