#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