如何實現前端微服務化？

譯者按:微服務在後端開發中大行其道，其實對於越來越複雜的前端應用來說，微服務也是一種不錯的選擇。

譯者: fundebug

對於網頁應用，現代的開發方法使得前端部分變得越來越大，與之對應的後端反而變小。我們的**weld的**中90%都是前端相關。我可以想象大多數現代的網頁應用都類似。

網頁應用一直在演化，網頁開發的技術也在不斷進步。現代的開發甚至依賴於在同乙個專案中使用多個不同的框架。比如我們使用一些依賴於jquery、angularjs 1.x的舊的模組，和react、vue裡面的新模組。

我們需要一種方法可以把乙個大的專案拆分成很多個小的模組，讓它們獨自執行。

舉個例子：

能夠想象我們需要如下技術：

正如大家想到的，那就是前端微服務化。像spotify, klarna, zalando, upwork和allegro都使用前端微服務化技術來構架他們的網頁應用。

我總結了一下幾種實現方案：

我認為最好的方案是single-spa "meta framework"可以在乙個頁面將多個不同的框架整合，甚至在切換的時候都不需要重新整理頁面(這個是demo，支援react, vue, angular 1, angular 2, etc)。可以看bret little的介紹。

多個單一頁面應用分管不同的url。該方法使用了npm/bower來共享某些功能。

將微服務包裝到iframes中，然後使用一些庫和window.postmessageapi來互動。

使用varnish cache來整合不同的模組。

使用web components來作為乙個整合層整合所喲模組。

react部件黑盒技術。