第一篇介紹瞭如何將React元件轉換為Web Component
第二篇介紹了子應用(Web Component)中的路由可以正常作用與Shell App
第三篇介紹了Sub App與Shell App通過屬性或自定義事件互動
第四篇介紹Web Component + React實現微前端的POC

本文(及後續)在先前的基礎上，思考如何做效能改進，及其他與微前端相關的話題。
第一個問題，如果所有sub app都用react，那麼是否可以把相關依賴從sub app提升到shell app？ 因為如果每個sub app都獨立打包，並且把react依賴都打包進去，會導致bundle檔案過大。
在原先程式碼

  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }

上述配置告訴webpack打包的時候跳過react、react-dom，具體語法參考WebPack官網

開啟public/index.html, 新增react、react-dom的js引用。 這是為了單獨測試sub-app-01用的，執行
npm run build
node ./src/server.js
可以檢視效果

    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 

參考React官網

最後，開啟shell app -> public/index.html，同樣加上上述script的引用

可以看到對比完全打包的bundle，這種方式小了很多，從158KB下降到了32KB。