web组件化 - 微前端的改进：子应用Webpack排除React依赖包

第一篇介绍了如何将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文件过大。
在原先代码的基础上，修改过程如下：
打开sub-app-01 -> webpack.config.js -> 添加

  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。