前端多个项目公共模块如何管理与更新？

Question

如图，假如我多个项目都引用了一个公共模块(可以看作是一个header或footer)，这个模块单独维护。

现在有几种思路：

1. npm包(现有私有仓库)
2. git submodule
3. iframe引用
4. ajax异步加载
5. 写一个纯js文件动态生成DOM与样式存放CDN并在各项目中引用。

第一二种方案更符合模块化的思想。但是只能在开发构建的时候引用打包生成，假如变更了公共模块，全部项目要更新公共模块构建后再上线，如果项目多了就很麻烦了。
第三四五种方案能实现，但感觉有点不友好，有更好的解决方案吗？

Answer 1

当然是第一种啦！
我们公司就是用的第一种！我们有20，30个项目都依赖于几个common的library，其中就包括header和footer，都放在假设的npm私库里，项目都是jenkins自动构建的，不存在什么不好管理的问题，不清楚你的困惑到底是什么。。。

Answer 2

第一二种方法挺好的，如果项目多了的话要靠持续集成工具来减少麻烦,所消耗的就是时间而已

Answer 3

没有遇到过这样的需求，以下仅仅是个人的一些简单的想法。
主要可能还是看你各个项目的更新成本和你不同方案间性能差异上的一些衡量吧。
如果都是web网站,其实更新成本并不高，特别是现在的打包发布流程大多可以自动化进行，我觉得还是以npm包或是Git子模块来管理更加，同时也相对有利于某些情况下的特殊需求和处理。
其次看模块所在位置，如果是header部分，后三种方法可能就相对不太好，存在一定渲染时间和加载上的问题，如果是footer部分，那么可能差异不明显。