微前端实践

本文转载自 知乎-深海潜水员，如需转载，请注明来源

开始时，大部分新项目开始时不会直接采用微前端去做，慢慢因为项目太庞大了再去用微前端改造升级。当然等微前端基础设施建好后，以后大规模项目一定会成为优先选择微前端。

我在实践中也是如此，主要分享一下使用qiankun微前端方案经验。如何在管理端和移动端进行的升级改造，当然这两端的改造遇到大部分问题是相同的。

如何引入微前端请参考快速上手

在实践中，注册子应用参考如下配置：

如果微前端分别应用在development和production环境，entry配置就需要区分。应该注意到非开发环境的入口使用index-spa.html，非index.html，原因是路由采用history的访问模式，直接导致index.html在测试、产线等环境上都是访问不到的，需要替换成其他入口名称。

在开发环境中，每个子应用的端口是不同的，对每个子应用不同端口进行配置。当然如果不想启用开发模式下的微服务，也可以去掉。但推荐工程师尽可能保持统一的好习惯。

container配置需要说明一下，它是指定子应用插入到html的位置id。如果有公共左菜单或公共头尾，推荐配置在根应用上，不应该配置在子应用。这也是微前端意义所在，使用户体验与规模化应用相同。

开发环境启动入口较简单，此处不细提。需要说明在开发环境下，需要配置支持跨域，因为子应用使用不同端口，在产线上如果子应用的域名不同同样也需要配置的。参考如下：

线上的入口配置，如果路由使用history模式，需要对所有子路径重定向到入口html，然后交给微前端自动处理。配置如下：

子应用导出相应的生命周期钩子按照教程做，基本上问题不大。

但有可能就是获取不到钩子的情况，通过一种hack注册钩子后可以使用，注意这个全局bankApp与注册子应用的名称需相同。

对于公共菜单和头尾模块的处理，最好办法是放在根应用上。

子应用在开发模式下，对于公共菜单和头尾模块的处理，若果从根应用访问时需要进行隐藏，但直接访问子应用时需要显示。在发布时，推荐可对公共菜单和头尾模块进行移除。