背景
最近,工作中遇到一个问题:手头有两个项目,其中有几个模块界面功能都是一模一样的,所以想着是否可以共用一套代码。
发现有一些解决方案:
- 通过iframe嵌套页面;
缺点:遇到iframe高度控制问题,iframe是不能自适应变更的,所以需要在子应用里进行动态改变iframe的高度(包含各种数据渲染及图片加载完成的监听等),方法比较复杂,代码也会很冗杂;浏览器状态不同步,刷新后iframe状态丢失;
优点:但是没有跨域问题,样式和js隔离; - 通过qiankun(使用的是single-spa)配置微应用实现:
缺点:有跨域问题,需要部署在统一的域名下,而且父子应用之间的元素选择器的样式会互相影响;
优点:好处是父子应用里的代码修改不多,子应用中有相应标识能知道当前是子应用还是说独立访问。