Single SPA

  • Root App 不建議採用任何前端框架（React, Vue, Angular...）

  • 不建議共用 state, 會造成 Child App 間耦合

    • 如何達成共用 state
      • Solution 1: 寫成共用的 API library
      • Solution 2: Export/Import
      • Custom Browser Events
      • 儲存在 Cookie, LocalStorage, SessionStorage

  • 可以把 Child App 拆成不同 Repo, 並用 SystemJS + CI 串起來

    • 用 CI 上傳新的 Import Map

  • Import Map

  • 可以使用 create-single-spa 創建專案

  • Code Splits

    Set the __webpack_public_path__ dynamically so webpack knows where to fetch your code splits

Recommended Setup

  • 設定為 SystemJS（or ES Module）+ Import Map 的好處
    • 共用 Library 好維護
    • 共用 Code 好維護
    • 各自（Child App）為政
    • 主要是作為 ES Module 的替代方案
  • In-Browser vs Build-Time Module：可以使用 Webpack Externals, Rollup Externals 處理
    • Single-SPA 本身：In-Browser Module
    • 大型共用框架（React, Vue, Angular...）：In-Browser Module
    • 其他有的沒的：Build-In Module
  • Module Federation vs Import Map
    • Module Federation：Webpack 新功能，可以讓 children app 共用相同的 library、不重複下載。
    • Module Federation 跟 Import Map 二擇一。
  • SystemJS：提供 polyfill-like 的 Import Map 解決方案。
  • Lazy Load：single-spa loading functions
  • 開發過程：建議只運行正在經手的 child app（microfrontend），其他 children app 透過 Import Map 處理。
    • Import Map 中其他 child app 指向已經部署上線的服務。
  • Bundle Tool：建議用 Webpack。
    • output.libraryTarget: 'system'
    • single entry
    • 不要使用 optimization
    • the systemjs docs for webpack
    • systemjs-webpack-interop
    • 停用 webpack hashing，production 再透過 ci 加上就好。
    • Webpack Dev Server Setup：...。
    • Webpack External 確認是否設定正確（共用 library 之類的）。
    • Unique jsonpFunction/output.library for every microfrontend's bundle.
  • Utility Module：跨 microfrontend 共用的 API. 須妥善設定 External 及 Import Map。
  • Shared Dependency：Module Federation、Import Map 二選一。
    • Shared Dependency 可以自己一個 repo 用 Import Map 管理。
  • Prefer splitting microfrontends by route, instead of by components within a route.
    • Create utility modules for your core component library / styleguide, for shared authentication / authorization code, and for global error handling.
    • If you are only using one framework, prefer framework components (i.e. React, Vue, and Angular components) over single-spa parcels.