微前端笔记

single-spa 整体流程 

如上图就是采用single-spa实现微前端的整体流程：

资源模块加载器：用来加载子项目初始化资源。我们将子项目的入口js构建成umd格式，然后使用模块加载器远程加载，通常会使用SystemJs（不是必须）通用模块加载器来进行加载。

子应用资源配置表：用来记录各个子应用的入口资源url信息，以便在切换不同子应用时使用模块加载器去远程加载。因为每次子应用更新后入口资源的hash通常会变化，所以需要服务端定时去更新该配置表，以便框架能及时加载子应用最新的资源。

注意：single-spa本身是不支持子应用资源列表的，每个子应用只能将自己所有初始化资源打包到一个入口js中。如果子应用初始化资源有多个文件（可以通过webpack-manifest-plugin生成应用初始化资源清单），就需要按照上述方式来添加额外处理。

微前端怎么实现各个子项目间样式和js全局变量隔离？

1. 使用 qiankun 框架，自带样式和js全局变量隔离
2. 制定js全局变量命名规范，全局变量前加项目名。
3. BEM，或者css-in-js或者css-module

微前端相关优质文章：

• 每日优鲜供应链前端团队微前端改造