3. 緣起
LINE 擁有眾多的產品:LINE TODAY, LINE SPOT, LINE SHOPPING…等,也有不少的
engineering teams,隨著產品愈來愈多,我們想要有個⽅式,能夠更好的讓⼯程師們去
分⼯合作以及盡可能重複使⽤既有的程式碼,減少⼯程師們所需要花費的時間跟⼒氣。
※Source from︓************************
16. 從 Bundle Level 來看
Module Federation
Multiple separate builds should form a single
application. These separate builds should not
have dependencies between each other, so they
can be developed and deployed individually.
※Source from︓https://medium.com/swlh/webpack-5-module-federation-a-ga
me-changer-to-javascript-architecture-bcdd30e02669
20. Module Federation
- 個別的 app 彼此是 standalone 的,可以分開 deploy,可以互相引⽤
- LINE TODAY 現在已經是⾃⼰⼀個完善的 app server,可以在改動最⼩的情況下,把 TODAY
server 當 module server 來⽤
- 另外可以再起⼀個新的 module server,讓他 host 所有 sharable 的 chunk,⾃⼰也可以 host
⼀個 module list site,讓想要引⽤的 developer 去看 demo。
- 如果某個 module 有線上的問題,可以只重新 deploy 有問題的 module 就好
The benefits
21. Module Federation
- 對於 SSR 的⽀援度有問題,無法在 server side 簡單的拉到需要的 chunk,需要不少的
workaround 去處理
- ⽬前只有 Webpack 5 ⽀援,Nuxt 2 只⽀援到 Webpack 4,所以 Nuxt base 的專案⽬前無法
使⽤(October 12, 2021, 10 PM GMT+8 會推出 Nuxt 3)
- 在 Next.js 上使⽤在拉 asset 的時候會有 routing 的問題,需要搭配 MF 作者⾃⼰寫的
extension 去 workaround
Problems we bumped into
22. Qiankun is an implementation of Micro
Frontends, which based on single-spa. It aims
to make it easier and painless to build a
production-ready microfront-end architecture
system.
Qiankun/Single SPA
※Source from︓ https://qiankun.umijs.org/guide
32. Pre-installed Self-Contained Modules
- Nuxt.js 的 fetch() 可以在任意 component 拉資料:
- On the server, before the initial page is rendered
- On the client, some time after the component is mounted
- 利⽤這個特性,我們可以讓個別的 modules ⾃⼰處理 data 的抓取,然後做成 self-contained
modules
- 使⽤ registerModule 來把個別的 store 註冊進去 host
- 如果是 Next.js 我們就要⾃⼰定義 provider 和 consumer,以及考慮如何組合 store
以 Nuxt 為例