背景:ng技术栈,路由菜单会频繁的切换,不提倡用路由分发实现打开新页签的方式,页面之前通讯不频繁。内部系统,不考虑浏览器IE兼容问题
- 路由分发
使用Nginx来进行路由分发。这种重构或者重写系统的方式,又可以称为绞杀者模式,即一小部分一小部分地迁移系统,而非一次性迁移整个系统。
- 使用iframe作为容器
- 微应用化
微应用化是指,在开发时应用都是以单一、微小应用的形式存在的,而在运行时则通过构建系统合并这些应用,组合成一个新的应用。
除了限制开发人员使用同一个框架,它还有一些缺点
(1)所有应用的依赖需要统一。一旦依赖版本不一致,可能会带来其他问题。
(2)高度依赖于持续集成。每个子应用在提交的时候,都会重新构建出整个应用。一旦一个子应用出错,系统就会出错。它的优点是:实现简单、成本较低。
- 前端微服务化
qiankun
我们需要注意的是:
◎ 在加载应用时的事件绑定及应用入口。
◎ 在卸载应用时的事件解绑
采用基座化的方式来加载其他应用
- Web Components
Web Components是一套技术,允许开发人员创建可重用的定制元素(功能封装在代码之外),可以在Web应用中使用它们
Web Components主要由如下四项技术组件组成
- Custom Elements(自定义元素),允许开发者创建自定义元素。即常见的HTML标签以外的元素,如
等。 - Shadow DOM(影子DOM),它是一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)中,并控制其关联的功能。通过它可以保持元素的私有化,而不用担心与文档的其他部分发生冲突。
- HTML Templates(HTML模板),如和
元素等,可以用于编写不在页面中显示的标记模板。 - HTML Imports,用于引入自定义组件。目前的做法都是将组件的定义细节存储在一个单独的文件中,再通过导入文件来使用。
首先,Web Components的组件由link标签引入,具体代码如下:
然后,在需要使用组件的地方引入这些组件,具体代码如下:
◎ 创建组件的DOM结点。
◎ 通过HTML Imports导入组件。将Web Components的微前端方案分为两种:
◎ 纯Web Components方式。
◎ 结合Web Components的方式。使用纯Web Components构建应用会更复杂,它没有一个现代的框架所需要的双向绑定、路由、模板引擎等要素。因此,在构建的时候可以考虑使用基于Web Components的前端框架,如Polymer或者Stencil。
在现有的Web框架里,已经有一些框架可以支持Web Components形式的组件,比如Angular支持的createCustomElement就可以实现一个Web Components形式的组件:
- webpack5 模块联邦
webpack升级