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

全文3740字，预计阅读时间9分钟。前端

1、EMP是什么

EMP 是一个微前端架构解决方案集合，旨在帮助你们能更简单、更高效的构建生产可用微前端架构。https://github.com/efoxTeam/empvue

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 已在服务的线上应用具备必定的稳定性和扩展性。node

2、EMP 出现的背景

随着 Web 应用的日渐强大，随之而来的是前端项目不断膨胀。业务需求不断叠加的状况下，巨石项目愈来愈难维护，编译时间愈来愈难等。具体来讲是，可能会出现几 MB 的 Bundle Size、十几甚至几十号前端开发人员、一个前端代码库（含 node_modules）会有几 GB。因此须要思考如何把庞大的 Web 项目分解成若干个项目，以便于团队分工协做。react

业务开发中，不一样项目之间会存在不少可复用的模块。通用的用户数据、UI架构风格、类似的业务逻辑均可以复用，例如一个时间戳转时间的函数就能够处处复用而无需重写甚至引库。因此须要思考如何可让多个应用项目直接共享这些可复用的模块。固然拆成 NPM 包是一个不错的想法，也是最经常使用的。webpack

3、EMP 的优点

巨型项目解耦。把巨型项目分解成多个小型项目，分团队开发维护。git
快速封装可复用模块。无需单独拆包发布到 NPM，可直接暴露须要共享的模块。引入端仅须要简单配置输出端的地址便可在代码上使用该共享模块。github
动态更新。把复用的业务模块放在同一个基站应用之中进行管理和维护，而且暴露出去能够给多个应用使用。若是业务模块须要更新逻辑的话，只须要发布部署基站应用，其余应用并不须要任何操做，只须要访问时刷新，便可使用最新业务模块。web

- 远端模块，因为引入端无需手动更新，远端模块的灵活维护和引入端能够自由组合，甚至能够运行时引入使用远端模块。npm

- 加速构建。由于引入其余项目暴露的模块，不须要本地构建这些子模块的代码，减少了构建体积，提高整个应用的构建速度。- 减小单个项目 Bundle Size。由于引入其余项目暴露的模块，减小各个项目 Bundle Size。

- 下图时对旧项目改造使用了 EMP 微前端方案后带来的速度提高的实际数据

4、EMP 架构设计

5、EMP 生态

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

6、EMP 开箱即用

1.初始化

npx @efox/emp-cli init

能够选择如下模板项目进行初始化，推荐试用 React Typescript 模板
按提示执行 cd my-emp && yarn && yarn dev 以后，项目将会自动打开在浏览器。
React 基站：

+ 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 是最新版本。

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

以 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
  })
})

7、已有项目无痛升级到 EMP 微前端架构

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

8、跨框架调用实现

EMP 不推荐你们跨框架调用，由于这样会增长维护成本和风险。可是咱们仍是支持：

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

9、对比 NPM 拆包

可是 npm 拆包有必定工做量：

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

可是业务模块抽离成 npm 包后,使用 npm 包的更新流程繁琐复杂：

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

可是 npm 包会拖慢构建速度：经过 npm 引入 n 个的业务模块后，在构建时至关于将n个业务模块的代码“复制”到了项目中，构建时须要同步去构建这些业务子模块，致使 bundle size 变大，构建时长会增长，开发体验变差，发布效率也会随之下降。

10、总结

本文用较短的篇幅介绍了 EMP 的诞生背景、使用场景、生态以及如何无痛使用。
EMP 在不断迭代升级，同时生态日渐完善，欢迎各位来了解、使用 EMP 微前端解决方案。
期待你们一块儿探讨，欢迎来提issue或者新功能：

https://github.com/efoxTeam/emp

11、QA

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

招聘信息：

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

关注同名公众号百度Geek说，输入内推便可，咱们期待你的加入！

推荐阅读：

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

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

｜百度大规模Service Mesh落地实践

｜一种基于实时分位数计算的系统及方法

---------- END ----------

百度Geek说

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

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

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

欢迎各位同窗关注

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