关于前端:百度关于微前端架构EMP的探索落地生产可用的微前端架构

3次阅读

共计 4198 个字符，预计需要花费 11 分钟才能阅读完成。

导读：随着 Web 前端工程‬日趋简单，也‬带来了更大的工程理治‬挑战，微前端在‬大型前端工架程‬构解决方案中成已‬为重要思路之一。本文详细描述 EMP 的诞生背景、应用场景、生态以及如何应用，能够帮忙大家能更简略、更高效的构建生产可用微前端架构。

全文 3740 字，预计浏览工夫 9 分钟。

EMP 是一个微前端架构解决方案汇合，旨在帮忙大家能更简略、更高效的构建生产可用微前端架构。https://github.com/efoxTeam/emp

2020 年 5 月开始，咱们团队开始摸索微前端架构。调研从支流的 iframe、Single SPA 到那时刚刚问世的 module federation，最初抉择性能和比拟有前景的 module federation 作为根底技术进行架构 EMP 微前端解决方案。至今有一年多，曾经 releases 53 个版本，解决 108 个 issues，同时具备肯定水平生态，有 43 种应用场景的 Demo，反对 7 种 EMP UI 插件反对（包含但不限于 React、Vue、Angular、Preact），4 个编译器反对（babel、esbuild、swc、esm），1 个 Webpack Plugin，目前 EMP 已在服务的线上利用具备肯定的稳定性和扩展性。

随着 Web 利用的日渐弱小，随之而来的是前端我的项目一直收缩。业务需要一直叠加的状况下，巨石我的项目越来越难保护，编译工夫越来越难等。具体来说是，可能会呈现几 MB 的 Bundle Size、十几甚至几十号前端开发人员、一个前端代码库（含 node\_modules）会有几 GB。所以须要思考如何把宏大的 Web 我的项目分解成若干个我的项目，以便于团队分工协作。

业务开发中，不同我的项目之间会存在很多可复用的模块。通用的用户数据、UI 架构格调、类似的业务逻辑都能够复用，例如一个工夫戳转工夫的函数就能够到处复用而无需重写甚至引库。所以须要思考如何能够让多个利用我的项目间接共享这些可复用的模块。当然拆成 NPM 包是一个不错的想法，也是最罕用的。

巨型我的项目解耦。把巨型我的项目分解成多个小型我的项目，分团队开发保护。
疾速封装可复用模块。无需独自拆包公布到 NPM，可间接裸露须要共享的模块。引入端仅须要简略配置输入端的地址即可在代码上应用该共享模块。
动静更新。把复用的业务模块放在同一个基站利用之中进行治理和保护，并且裸露进来能够给多个利用应用。如果业务模块须要更新逻辑的话，只须要公布部署基站利用，其余利用并不需要任何操作，只须要拜访时刷新，即可应用最新业务模块。

– 远端模块，因为引入端无需手动更新，远端模块的灵便保护和引入端能够自由组合，甚至能够运行时引入应用远端模块。

– 减速构建。因为引入其余我的项目裸露的模块，不须要本地构建这些子模块的代码，减小了构建体积，晋升整个利用的构建速度。- 缩小单个我的项目 Bundle Size。因为引入其余我的项目裸露的模块，缩小各个我的项目 Bundle Size。

– 下图时对旧我的项目革新应用了 EMP 微前端计划后带来的速度晋升的理论数据

EMP 针对不同的 UI 框架和应用场景都有进行适配和优化。

npx @efox/emp-cli init

能够抉择以下模板我的项目进行初始化，举荐试用 React Typescript 模板

  

![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29b5c4cfa4804854a94d4d1a83a17501~tplv-k3u1fbpfcp-zoom-1.image)

按提醒执行 cd my-emp && yarn && yarn dev 之后，我的项目将会主动关上在浏览器。
React 基站：

  

![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a2afbe15ae346ff85170b2f2713e49e~tplv-k3u1fbpfcp-zoom-1.image)

+ React 我的项目：

如果你想事后装置 @efox/emp-cli，能够通过全局装置 npm install -g @efox/emp-cli 或 yarn global add @efox/emp-cli。
倡议你卸载该包应用 npm uninstall -g @efox/emp-cli or yarn global remove @efox/emp-cli 确保 npx 应用的 @efox/emp-cli 是最新版本。

以 React 为例，解释配置外围：

/**
 * @type {import('@efox/emp-cli').EMPConfig}
 */
module.exports = {webpack() {
    return {
      devServer: {
        /**
         * 设置 devServer
         */
        port: 8002,
      },
    }
  },
  async moduleFederation() {
    return {
      /**
      * name: 对外裸露我的项目名,
      */
      name: 'demo',
      /**
      * filename: 对外裸露援用文件名,
      */
      filename: 'emp.js',
      /**
      * remotes 近程模块
      * remotes: {
      * '援用别名': '近程模块我的项目名 @近程模块的 emp.js 文件地址',
      * },
      */
      remotes: {'@emp/demo1': 'demo1@http://localhost:8001/emp.js',},
      /**
      * exposes 裸露模块
      * exposes: {
      * '对外裸露的相对路径': '以后我的项目相对路径',
      * },
      */
      exposes: {
        './components/Hello': 'src/components/Hello',
        './helper': 'src/helper',
      },
      /**
      * shared 共享的第三方依赖
      * shared: ['依赖名'],
      */
      shared: ['react', 'react-dom'],
    }
  },
}

以 Vue2 为例，解释配置外围：

const withVue2 = require('@efox/emp-vue2')
module.exports = withVue2(({config}) => {
  const projectName = 'vue2Project'
  const port = 8008
  config.output.publicPath(`http://localhost:${port}/`)
  config.devServer.port(port)
  config.plugin('mf').tap(args => {args[0] = {...args[0],
      ...{
        /**
         * name: 对外裸露我的项目名,
         */
        name: projectName,
        /**
        * filename: 对外裸露援用文件名,
        */
        filename: 'emp.js',
        /**
         * remotes 近程模块
         * remotes: {
         * '援用别名': '近程模块我的项目名 @近程模块的 emp.js 文件地址',
         * },
         */
        remotes: {'@v2b': 'vue2Base@http://localhost:8009/emp.js',},
        /**
        * exposes 裸露模块
        * exposes: {
        * '对外裸露的相对路径': '以后我的项目相对路径',
        * },
        */
        exposes: {'./Content': './src/components/Content',},
        /**
        * shared 共享的第三方依赖
        * shared: ['依赖名'],
        */
        shared: ['vue/dist/vue.esm.js'],
      },
    }
    return args
  })

  config.plugin('html').tap(args => {args[0] = {...args[0],
      ...{title: 'EMP Vue2 Project',},
    }
    return args
  })
})

@vue/cli Vue2 模版降级到微前端 EMP
React CRA 我的项目降级到微前端 EMP

EMP 不举荐大家跨框架调用，因为这样会减少保护老本和危险。然而咱们还是反对：

Vue3 调用 Vue2 组件
Vue&React 相互调用

然而 npm 拆包有肯定工作量：

须要把可复用模块从业务我的项目抽离到一个新的 package
搭建新的构建配置
独自建 repo
在原有业务我的项目从新援用
可能会因为封装，须要从新设计 API

然而业务模块抽离成 npm 包后, 应用 npm 包的更新流程繁琐简单：

更新 npm 包版本
更新 A 利用的 npm 包版本
重启 A 利用进行验证
公布部署 A 管理系统利用
对 B 和 C 利用循环 2 和 3、4 步骤

然而 npm 包会拖慢构建速度：通过 npm 引入 n 个的业务模块后，在构建时相当于将 n 个业务模块的代码“复制”到了我的项目中，构建时须要同步去构建这些业务子模块，导致 bundle size 变大，构建时长会减少，开发体验变差，公布效率也会随之升高。

本文用较短的篇幅介绍了 EMP 的诞生背景、应用场景、生态以及如何无痛应用。
EMP 在一直迭代降级，同时生态日渐欠缺，欢送各位来理解、应用 EMP 微前端解决方案。
期待大家一起探讨，欢送来提 issue 或者新性能：

https://github.com/efoxTeam/emp

如果有问题的话，能够先来看看咱们的 issue 哦。世界这么大，说不定你和他人遇到一样的问题：https://github.com/efoxTeam/emp/issues?q=is%3Aissue+is%3Aclosed

招聘信息：

百度直播研发部招聘研发岗位，包含客户端 -Android/iOS 方向，服务端 -Go/PHP 方向。咱们负责百度直播业务，对直播业务感兴趣欢送退出咱们。

关注同名公众号百度 Geek 说，输出内推即可，咱们期待你的退出！

举荐浏览：

|百度 C ++ 工程师的那些极限优化（并发篇）

|百度 C ++ 工程师的那些极限优化（内存篇）

|百度大规模 Service Mesh 落地实际

|一种基于实时分位数计算的零碎及办法

———- END ———-

百度 Geek 说

百度官网技术公众号上线啦！

技术干货 · 行业资讯 · 线上沙龙 · 行业大会

招聘信息 · 内推信息 · 技术书籍 · 百度周边

欢送各位同学关注

正文完

前端

发表至：前端

2021-06-29

0

关于前端:一文带你理解可以迭代大部分数据类型的-for…of-为什么不能遍历普通对象

关于前端:深入理解web前端JavaScript看这一篇就够了

关于前端:使用自开发的代理服务器解决-SAP-UI5-FileUploader-上传文件时遇到的跨域访问错误试读版

Flutter-新闻客户端-08-路由管理-autoroute

关于人工智能:技术解密｜阿里云多媒体-AI-团队是凭借什么拿下-CVPR2021-5冠1亚的

关于前端:百度关于微前端架构EMP的探索落地生产可用的微前端架构

一、EMP 是什么

二、EMP 呈现的背景

三、EMP 的劣势

四、EMP 架构设计

五、EMP 生态

六、EMP 开箱即用

1. 初始化

2. EMP 惟一的配置文件 emp-config.js ,

以 React 为例，解释配置外围：

以 Vue2 为例，解释配置外围：

七、已有我的项目无痛降级到 EMP 微前端架构

八、跨框架调用实现

九、比照 NPM 拆包

十、总结

十一、QA

站内搜索