#yyds干货盘点#——聊一聊微前端

       ​随着前后端分离技术越来越成熟，后端向着微服务发展，前端项目也越发臃肿起来，不得不做更细粒度的拆分，就这样微前端的思想开始盛行，一些大厂也出台了一些解决方案，本文就让我们一起来了解一下微前端。​

1 前端如何发展到微前端？

       从最早期的前后端不分离，借助后端进行页面渲染，JSP、ASP、PHP技术盛行。随着项目不断扩大，这种开发形式的弊端也逐渐暴露出来，前端后端越来越复杂，前后耦合严重，不方便分工协作。然后前后端分离的模式诞生，喜欢做用户体验的工程师，专心研究前端，喜欢优化服务器性能，喜欢和数据打交道的工程师研究后端。前后端分离，各自的技术也在不断升级，后端开始向着微服务发展，前端也随着岁月的沉淀，项目变的臃肿，打包编译速度也在不断变慢，而且想要尝试新的技术时，大规模的替换旧代码风险升高，进而前端也面临着拆分，就这样前端发展到微前端时代。

2 什么是微前端?

理解什么是微前端就要先了解什么是微服务，微服务就是后端面向服务架构的一种升级，借助轻量级的通信协议将一个一个的服务组织起来，形成一整套服务，每个服务之间松耦合，可以是不同的语言开发的，每个服务提供不同的职责，最后再组织在一起，对外提供功能。

微前端可以说是吸收了微服务这种思想，将前端的项目也拆分开来，每个项目可以使用不同技术，可以单独部署，最后再借助统一的主应用来加载子应用，将页面集成到一起。

​微前端​就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端的核心在于​拆​, 拆完后再​合​!

3 微前端有哪些优势?

• 简单、松耦合
• 代码库更小，高内聚，更容易维护，更快的编译速度
• 渐进式的升级，降低前端代码重构风险
• 可独立部署
• 方便不同团队（不同技术栈）开发，最后集成到一起
• 老的应用丢弃不了
• 共享组件

4 微前端的实现方案有哪些？

• 服务端集成，必要的话，可以在服务端也建立一套与前端相对应的结构，使用HTTP服务器的路由重定向多个应用。

• iframe

  最大的特性就是提供了浏览器原生的隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。

• ​Web Components 三项合一

1. Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
2. Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
3. HTML templates（HTML模板）： ​

   ​<template>​

   ​​ 和 ​

   ​<slot>​

   ​ 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

• ​ESM

       ESM 存在着 兼容性 这一大弊端, 大部分老版的浏览器 仍然无法直接使用，他可以通过 webpack、 rollup、 esbuild 、 snowpack等编译工具成为兼容性的代码。​

• ​qiankun

• ​​EMP