single-spa微前端简单实践与优化思路

Posted 2023-03-15

参考技术A 微前端是指存在于浏览器中的 微服务 。

基于iframe的微前端因为不使用所以不在本文中出现具体表现为每一个子系统的子页面均是由iframe加载的，不同模块的前端应用之间可以相互独立运行
一开始就引入了多个应用的js。是把子应用直接加载到页面中。所有的子应用都运行在同一个内存空间。

simple-single-spa-webpack-example

通过配置externals可以减小子项目打包出来的体积。 webpack外部扩展

通过 system.js 优化资源加载

入口index.html只有一个，不一次性引入所有CDN资源，可能子项目A使用而B不使用导致重复引用systemjs只是在加载index.html时注册了这些CDN地址，不会直接去加载，当子项目里用到的时候，systemjs会接管模块引入，再动态去加载资源。避免不同子项多余加载。 参考demo地址

在获取子应用的配置信息时，我们可以按照约定 path 的规则，Single-SPA 对应 entry js/html 配置可以减少加载。