微前端架构学习《一》emp

2023-04-10 462 阅读4分钟

微前端

微前端在2016年ThoughtWorks Technology Radar正式被提出。微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化，富交互化，也就是SPA应用；这样越来越复杂的单体前端应用，背后的后端应用则是数量庞大的微服务集群。

微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，这样才能确保微应用真正具备独立开发、独立运行的能力

架构特点

技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权；
独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新；
增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略；
独立运行时每个微应用之间状态隔离，运行时状态不共享。

EMP 微前端技术

EMP 微前端技术是基于 Webpack 和 RequireJS 等技术，通过对 JavaScript 模块进行动态加载和管理，实现前端应用的微小化。具体来说，EMP 微前端技术的实现原理如下：

前端框架：EMP 微前端技术的实现基于现代化的前端框架，如 React、Vue 等，这些框架可以将复杂的业务逻辑和 API 接口封装起来，使开发人员可以专注于前端的用户交互和界面呈现。
模块管理：EMP 微前端技术采用模块化的方式进行前端应用的管理，通过 Webpack 等技术对 JavaScript 模块进行加载、打包和管理，使开发人员可以将复杂的业务逻辑和 API 接口封装起来，从而实现前端应用的微小化。
动态加载：EMP 微前端技术采用动态加载的方式，实现对 JavaScript 模块的实时加载和管理，从而提高开发效率和应用响应速度。
静态化：EMP 微前端技术对于前端应用的静态化处理，可以将用户交互和业务逻辑等信息封装在 JavaScript 模块中，使开发人员可以专注于前端的用户界面呈现和业务逻辑处理

EMP 微前端技术的应用场景

EMP 微前端技术具有广泛的应用场景，以下是几个常见的应用场景：

移动端应用：随着移动设备的普及，越来越多的应用开始支持移动端应用。EMP 微前端技术可以通过移动端适配等技术，将前端应用无缝地适配到各种移动设备上，从而提高用户体验。
小型应用：EMP 微前端技术可以实现前端应用的微小化，从而适用于各种小型应用场景，如博客、微信公众号等。
微信小程序：随着微信小程序的兴起，EMP 微前端技术可以通过小程序的 JS API 实现对小程序应用的开发和管理，从而提高开发效率和用户体验。
移动端 Web 应用：EMP 微前端技术还可以应用于移动端 Web 应用的开发，如微信小程序插件、支付宝小程序插件等。

EMP 微前端技术的实现方法

框架选择：选择适合自己的前端框架，如 React、Vue 等，可以大大提高开发效率和应用响应速度。
模块管理：对 JavaScript 模块进行管理，采用 Webpack 等技术对 JavaScript 模块进行加载、打包和管理。
动态加载：采用动态加载的方式，实现对 JavaScript 模块的实时加载和管理，从而提高开发效率和应用响应速度。
静态化：对前端应用的静态化处理，可以将用户交互和业务逻辑等信息封装在 JavaScript 模块中，使开发人员可以专注于前端的用户界面呈现和业务逻辑处理。
性能优化：通过采用合适的 Webpack 配置和优化技术，如减少 module.parent.export 等，可以提高 EMP 微前端技术的性能

小结

emp 基于 Webpack 5 的 Module Federation（模块联邦）实现，提供了在当前应用中远程加载其他服务器上应用的能力（每个应用之间都可以彼此分享资源），将多个独立构建应用组成一个应用程序。

第三方依赖可共享，减少重复的代码加载。