简介：“微型前端”一词现在是前端学生所熟悉的，并且各种解决方案也被开花了。主流是单SPA，Qiankun，后来是Webpack模块联合。在项目初始后端的微服务过程中，前端还降落在其自身的微端端 - 端 - 以更好地服务敏捷开发并提高交付效率。
全文是3308个单词，预计阅读时间为10分钟。
AI FANFAN团队的后端使用微服务体系结构来实现敏捷开发和部署。在与Microservices Architecture模式合作的情况下，需要在原始Web - 端端单个项目上分配前端。每个微服务的前端都需要一个独立的代码库来开发，测试，部署，上网并实现团队自主权以实现团队自治。，具有相同页面样式和交互式样式的统一系统。
鉴于以前的项目经验，当我们在运行时集成了统一应用程序的多个前端应用程序时，大多数使用了iframe方案，但是iFrame方案有这些问题：
以上问题大大降低了用户体验，我们不能采用。我们希望在分解代码库后，我们还可以保证以下经验：
由单个页面应用程序的路由代码生成的另一个解决方案：
当单个页面应用程序的性能优化通常会使用拆分代码的方式。当用户访问单页应用程序时，他们不会加载所有内容，只加载必要的前依赖项，然后跟踪当前页面路由异步加载路由对应的JS和CSS，异步渲染页面，以提高访问性能。
根据这个想法，将入口与iframe方案结合在一起的方式结合在一起，我们的想法是，独立应用程序是与JS和CSS相对应的页面路由的集合，将页面路由代码加载到相应的应用程序中，渲染相应的页面。
3.1路线分析主要项目负责存储和渲染所有菜单，负责作为页面渲染的容器以及前端路由的分析。主要项目需要找到相应的子工程和相应的子工程- 工程页面通过路由解析以获取页面资源地址，加载页面资源并渲染页面。
以上功能正是前端路由要做的。我们在技术堆栈中使用现有的前端路由插头 - 并对其进行转换。
路线规则：
例如：access/s1/aa =>加载https://xx.cdn.com/s1/s1_aa.js组件。
如果组件未加载在Vue-Router的后卫功能中，则解析相应页面的VUE组件加载相应的页面，则将加载的组件直接移交给Vue-Router，并自动处理Vue-Router。渲染过程。
3.2在完成分包生产逻辑的路由分析规范规范规范之后，我们需要处理子工程的汇编输出，并将其处理到由路由分开的前端资源（JS和CSS）。需要将每个路由用作由WebPack编译的入口，并且它将自动打包与每个入口相对应的JS和CSS。
一般方法是在WebPack配置文件中，使用脚本读取项目中途文件，集成所有入口并将其配置为WebPack的配置。
我们将此过程封装在命令行工具中。在编译过程中，我们可以统一阅读项目的固定路由配置文件并分析所有入口。
在此基础上，过去将提取公共文件的单个页面应用程序被拆分代码。一般方式是常见的。JS集成了所有业务公共文件。Vender.js集成了所有第三张库或框架。
这样，在优化了拆分代码的方法之后，加载路由的相应资源时，我们需要将common.js和vender.js加载到正面。
3.3解决子项目开发过程中独立操作的问题是，只有主要项目是一个完整的项目，包括单页应用程序的入口HTML，前端路由和页面容器。它可以在本地完成独立操作，但是没有页面。因为儿童工程只是页面资源的集合，它不是一个完整的应用程序，也不能单独运行。
我们分别处理本地运营和子工程。
子工程：我们将主要项目作为NPM依赖项介绍到子工程中。通过将主要工程入口添加到汇编入口中，可以同时编译主项目和子项目； HTML用作项目入口HTML，主项目入口JS文件用作项目入口JS文件。，然后输入路由分析逻辑。如果是当前的子项目本身，则CDN资源前缀为局部，而其他路由使用测试环境CDN。
主要工程：在本地开发期间，它开始本地服务作为入口。其他子项目的路径可以使用测试环境资源。
3.4求解版本的更改导致资源地址的问题变化，因为我们分析了路由异步加载的资源渲染的地址。当我们的子工程版本导致版本更改时，我们需要知道相应资源的新地址。
我们使用一种相对简单的方法来实施版本的管理 - 时间邮票控制项目版本，时间邮票的优点为：
1.版本维护是简单有效的，我们不需要维护更多信息，例如每个文件的哈希。
2.由于统一哈希，我们只能使用一个全局文件来维护所有项目版本，这比每个项目都多于一个单独的版本文件。它在运行时具有更高的加载和分析性能。
3.5应用程序和通信问题之间的观察**必须传达应用程序。当我们使用iframe时，我们可以使用后邮政，本地存储和其他方法。如果是相同的运行时不同项目，则可以使用窗口自定义事件或单独的事件可以引入机制。
由于我们的微型前端解决方案技术堆栈是统一的，因此自然通信非常方便。安装全球VUE事件机制和全球商店以实现沟通。
应用程序的格式是隔离全局对象上的属性，本地存储隔离和全球样式隔离。在隔离条款中，我们并非绝对地做，主要是使用命名空间，重点是商定的方法。
4.1集成所有解决方案以形成命令行工具。为所有问题构成解决方案后，为了避免重复配置每个访问项目，我们将所有方案集成到命令行工具Tangram-SDK中。
Tangramsdk整合了这些能力：
根据Tangram-SDK框架，我们建立了统一的项目管理和依赖管理。公共库，UI框架，代码规格，单元测试和施工方法。
4.2将我们的解决方案与CICD集成需要与CICD合作以更有效地执行各种流程。SUB-工程需要在同一目录中部署，并且部署阶段需要触发更新配置文件。
我们已经根据微型前端架构登陆管道模板，该模板是由组件统一的，每个环境的部署和释放，触发事件节点等初始化的，从而提高了前部的研究和开发效率 -最终同学。
4.3统一的微型前端解决方案支持多种产品
在AI FANFAN团队中，我们的微型前端解决方案已定居在多个在线产品中。
5.1加载性能优化5.2运行性能优化我们的微型前端框架已降落了很短的时间，在线操作相对稳定。也有更多选择前端框架，例如Single Spa，Qiankun，Webpack模块联合会等。
与单SPA或Qiankun等框架相比：
优势
1.由于运行中只有一个VUE实例，因此只有一个前端路由实例，而儿童工程的切换性能很高。
2.由于我们的统一技术堆栈和单个示例，我们的组件具有更高的重用。运行时，我们的公共模块只需要初始化一次，例如请求和公共组件。
3.基于第二个原因，不同业务中开发人员之间切换的成本很低。
4.由于增加了全局版本维护文档，因此不需要在主项目中注册新模块，并且管道会自动添加版本。
缺点
因为我们的框架是一个实例，所以一个更突出的问题是它不利于技术更新和发展。
我们计划中的转换计划将基于Qiankun的框架，以解决单个实例的技术演变，并保持现有代码的稳定性，这些代码可以逐渐迁移新技术。在同一时间计划。
- - - - - 结尾 - - - - - -
推荐阅读：
云尼亚时代的搜索服务计算电源管理
谈论小型计划开源业务的建设
Baidu applet软件包流下载和安装优化
FAAS SSR解决方案用于前端工程
中东登录并不严重或丢失。
百度TOB TOB垂直帐户权限平台的设计和实践，
原始：https：//juejin.cn/post/7098579314228068365