动态组件加载实践--httpVueLoader使用案例
1. 背景
众所周知，前端工程向着复杂化迈进。因此前端工程的架构问题也凸显出来。在大型项目中，会遇到需要将组件放在主项目之外的情景，一种普遍的场景是，一些组件由于业务或者功能的通用性，被多个主项目引用，且同时这些主项目不想因为通用组件的更新而频繁进行主动的自身版本跟新。这种情况在大型项目中是很常见的，这类问题其实业内已经有了比较多的关注，因此也有很多大型互联网公司提出了”微前端“的概念。这篇文章不会对”微前端“的概念进行表述，而是单纯聚焦于问题本身，即: 如何加载远程组件，或者说如何加载异步动态组件。
2. 具体场景
两个项目（VUE + Webpack）以下简称A项目和B项目，A项目引用B项目中的组件（单文件组件(.vue)）,即A项目为本实验中的主项目，B项目为提供A子组件的项目，最终成功发布A项目，并在A中看到B中的组件渲染
3. 实现方案
搭建两个Vue+webpack的项目（比较简单，这里不做详细说明，可以自行搜索资源进行），A项目下载npm包httpVueLoader ( github.com/FranckFreib… ),使用httpVueLoader提供的API进行远程组件的注册
4. 具体代码
5. 结果
在vscode上下载插件 Live Server 并使用此运行A和B项目，结果如下
可以看到A项目成功获取并引用了B项目中的vue组件
5. 相关链接 你可能不知道的动态组件玩儿法 juejin.cn/post/699248…
