网络组件化——微前端的改进：子应用网络包不包括反应依赖包。
第一篇文章介绍了如何将React组件转换为Web组件。
第二部分介绍了子应用程序(Web组件)中的路由可以在Shell应用程序中正常工作。
第三章介绍子App和Shell App通过属性或自定义事件的交互。
第四部分介绍了通过网络组件反应实现微前端的概念验证。
本文(及其后续)在前几篇的基础上，思考如何提升绩效等与微锋相关的话题。
第一个问题，如果所有的子应用都使用react，有没有可能把子应用的相关依赖升级到shell应用？因为如果每个subapp都是独立打包的，并且所有的react依赖项都是打包的，那么bundle文件就会太大。
在原代码的基础上，修改过程如下：
打开子app-01-webpack.config.js-add。
外部： {
反应’ : ‘反应’，
react-dom’: ‘ReactDOM ‘
}
以上配置告诉webpack打包时跳过react和react-dom，具体语法参考WebPack官网。
打开public/index.html，添加js引用react和react-dom。这是为了单独测试子app-01，正在运行。
npm运行构建
节点。/src/server.js
可以查看效果。
script cross origin src=’ https://unpkg.com/react @ 17/UMD/react . production . min . js ‘/script
script cross origin src=’ https://unpkg.com/react-DOM @ 17/UMD/react-DOM . production . min . js ‘/script
参考React官网
最后打开shell app-public/index.html，添加上面脚本的引用。
可以看出，与全封装的捆绑包相比，这种方法要小得多，从158KB到32KB。
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/51628.html