路由分發式

• 通過HTTP服務器的反向代理功能，將請求路由到對應的應用上

特點

• 采用的最多、最容易的“微前端”方案
• 并非一個整體，每當用戶從A應用轉換到B應用的時候，往往需要刷新一下頁面，重新加載資源文件
• 缺少了對應用狀態的處理，需要用戶重新登錄，這種體驗對用戶來說相當不友好

前端微服務化

• 在不同的框架之上設計通信和加載機制，以在一個頁面內加載對應的應用

特點

• 一個頁面上同時存在兩個及以上的前端應用在運行，而路由分發式方案則是，一個頁面只有唯一一個應用
• 在頁面合適的地方引入或者創建DOM
• 用戶操作時，加載對應的應用(觸發應用的啟動)，并能卸載應用
• 還需要保證應用間的第三方依賴不沖突，可以通過向上游開發者提Pull Request來修復這個問題

微應用

• 通過軟件工程的方式，在部署構建環境中，把多個獨立的應用組合成一個單體應用

特點

• 大都是以軟件工程的方式來完成前端應用的開發的，因此又可以稱之為組合式集成
• 通過業務作為主目錄，然后在業務目錄中放置相關的組件，同時擁有一些通用的共享模板
• 拆分出每個模塊之后，便只需要在構建的時候復制所有的模塊到一個項目中， 再進行集成構建
• 微應用化就是微前端的一種實踐，只是使用微應用化意味著我們只能使用唯一的一種前端框架

微件化

• 開發一個新的構建系統，將部分業務功能構建成一個獨立的chunk代碼，使用時只需要遠程加載即可

特點

• 每個業務團隊編寫自己的業務代碼，并將編譯好的代碼部署到指定的服務器上，在運行時，我們只需要加載相應的業務模塊即可(未來WebComponents)

• 單頁應用時代為了支持微件化，需要做：

  • 持有一個完整的框架運行時及編譯環境。用于保證微件能正常使用，即可調用框架API等

  • 性能受影響，應用由提前編譯變成運行時才編譯，會造成一些性能方面的影響，具體視組件的大小而定

  • 提前規劃依賴，如果一個新的微件想使用新的依賴，需要從上游編譯引入

• 此外還需要一個支持上述功能的構建系統，它用于構建一個獨立的微件模塊，這個微件的形式如下：

  • 分包構建出來的獨立代碼，如webpack構建出來的chunk文件

  • 使用DSL的方式編寫出來的組件

• 為了實現這種方式，我們需要對前端應用的構建系統進行修改，如webpack，使它可以支持構建出單個的代碼段，這種方式的實施成本比微應用化成本高

前端容器化

• 將iframe作為容器來容納其他前端應用

特點

• 有效地將另一個網頁/單頁面應用嵌入當前頁面中，兩個頁面間的CSS和JavaScript是相互隔離的，除去iframe父子通信部分的代碼，它們之間的代碼完全不會相互干擾，類似于沙箱隔離
• 采用iframe的前提是網站不需要SEO支持，設計相應的應用管理機制

應用組件化

• 借助于Web Components技術，來構建跨框架的前端應用

特點

• Web Components是一套不同的技術，允許開發者創建可重用的定制元素(它們的功能封裝在代碼之外)，并且在Web應用中使用它們
• 離現在的我們還有些距離，是一種面向未來演進的架構
• 只需要在頁面中通過Web Components引入業務模塊即可，其使用方式類似于微件化的方案
• 目前困擾Web Components技術推廣的主要因素在于瀏覽器的支持程度

- END -

總結

以上是生活随笔為你收集整理的前端iframe 能指定本地网页吗_微前端的技术拆分方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。