本文转载自微信公众号《Gogo的前端世界》，作者西岭。转载本文请联系Gogo前端世界公众号。如何实现多个应用之间的资源共享？之前的处理方式是以npm包的形式提取引用。以npm包的形式进行管理和使用。但这带来了以下问题：发布效率低下。如果需要迭代npm包中的逻辑业务，需要先发布npm包，然后为每一个使用npm包的应用更新npm包版本，然后分别构建发布。这个过程很麻烦。如果涉及更多的应用程序，将花费更多的人力和精力。多团队协作容易不规律。包含公共模块的npm包充当共享资产，“每个人”都拥有它，但实际上，这通常意味着没有人拥有它。如果没有明确的合同或技术愿景，它很快就会充满混乱且样式不一致的代码。这些问题让我们意识到，扩展前端开发以便多个团队可以同时开发一个大型复杂的产品是一个重要但困难的问题。因此，早在2016年，微前端的概念就诞生了。什么是微前端？微前端的概念MicroFrontends：https://micro-frontends.org/官方网站定义了微前端的概念：Techniques,strategiesandrecipesforbuildingamodernwebappwithmultipleteamsthatcanshipfeaturesindependently.从MicroFrontends官网可以了解到，微前端的概念是从微服务的概念延伸出来的。摒弃大规模单一的做法，将整个前端分解成小而简单的块，可以独立开发、测试和部署。同时，还是聚合成一个产品出现在客户面前。可以理解为，微前端是一种架构风格，将多个可以独立交付的小前端应用聚合成一个整体。需要注意的几点：微前端不是一种具体的技术，而是一种技术、策略和方法的集成，可以通过脚手架、辅助插件、规范约束等形式表现出来。它是一个宏观架构。这种架构目前有很多解决方案，各有优缺点，但只要方案适用于当前的业务场景，就是一个好的方案。微前端没有技术堆栈的限制。每套微前端方案的设计都是根据实际需求来设计的。如果多个团队统一使用react技术栈，微前端方案的跨技术栈使用可能没有要求；如果多个团队同时使用react和vue技术栈，可能对微前端方案的跨技术栈要求比较高。微前端使用场景1.拆分庞大的应用程序，使其更易于维护。2、兼容历史应用，实现增量开发。微前端同步更新相对于npm包提取的优势，让我们体会到更新流程和效率的重要性。由于微前端是多个子应用的聚合，如果多个业务应用依赖同一个服务应用的功能模块，只需要更新服务应用，其他业务应用可以立即更新，从而缩短更新过程，节省更新成本。增量升级迁移是一项非常耗时且困难的工作。比如一个管理系统使用AngularJS开发维护了三年，但是随着时间的推移和团队成员的变动，AngularJS在开发成本和用人需求上已经不能满足要求，所以团队想更新技术栈。在其他框架中实现新需求，但现有项目呢？直接迁移是不可能的，在新框架下完全重写也不现实。使用微前端架构可以解决问题。在保留原有项目的同时，完全可以使用新框架开发新需求，再使用微前端架构将旧项目与新项目进行整合。这样不仅可以让产品有更好的用户体验，也可以让团队成员在技术上得到提升，产品开发的成本也可以降到最低。独立部署和发布在当前的单页应用架构中，组件用于构建用户界面。应用程序中的每个组件或功能开发或错误修复完成后，每次都需要重新构建和发布整个产品。操作起来也比较复杂。使用微前端架构后，可以将不能使用的功能模块拆分成独立的应用。这时候功能模块可以单独构建和发布，构建时间会变得非常快。应用发布后，其他内容无需更改。该应用程序将自动更新，这意味着您可以经常进行构建和发布。独立的团队决策由于微前端架构与框架无关，当一个应用由多个团队开发时，每个团队都可以使用自己的技术栈进行开发，即让团队决定采用哪种技术运用得当，让团队合作不再僵化。微前端落地方案自组织模式：通过协议进行相互调整，但会存在处理第三方依赖等问题。Dock模式：通过构建基地和配置中心来管理子应用。比如在SingleSpa的通用乾坤方案的基础上，也有根据自己团队的业务量身定制的方案。去中心化模式：脱离基座模式，各个应用可以相互共享资源。例如基于Webpack5ModuleFederation的EMP微前端解决方案，可以实现多个应用之间的资源共享。其中，去中心化模式下的EMP微前端方案目前值得关注，不仅可以实现跨技术栈调用，还可以深度定制同一技术栈应用之间的共享资源。如果你刚开始研究微前端，可以先尝试了解一下EMP微前端解决方案，可能会给你带来不错的体验。Systemjs模块化解决方案Systemjs：https://github.com/systemjs/systemjs在微前端架构中，微应用被打包成模块，但是浏览器不支持模块化，需要systemjs在浏览器中实现模块化。systemjs是一个用于模块化的JavaScript库，有自己的模块化规范。在开发阶段我们可以使用ES模块规范，然后使用webpack将其转换成systemjs支持的模块。案例：将react应用通过webpack打包为systemjs模块，通过systemjs在浏览器中加载该模块。npm安装webpack@5.17.0webpack-cli@4.4.0webpack-dev-server@3.11.2html-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.10babel-loader@8.2.2src/index.htmlsrc/index.jssrc/App.jspackage.jsonwebpack.config.js
