背景
在前端项目中，有多个 Vue 页面存在长列表的场景，因此都使用了一个包：vue-virtual-scroll-list。
有一天因为有新页面需要考虑长列表的问题，正好看到这个包有 2.x 的版本，心想可以在新页面试试新版本的包的效果，顺便对比下两个版本的优化效果。
问题
新页面接入 2.x 版本很顺利，因为 1.x 和 2.x 的跨度还是很大的，所以并没有对所有页面都进行升级，毕竟成本在那里，都升级岂不是都要回归一遍页面……
但是在部署到测试环境之后发现，新页面是没有什么异常，但是老页面却直接挂了😨，这是为什么呢？
问题定位
根据页面的报错发现，报错的页面里的 api 其实是 2.x 版本的，但是为什么老页面没有升级却被 2.x 版本覆盖了呢？ 其实，vue-virtual-scroll-list 无论是 1.x 还是 2.x 版本，都在组件内直接全局注册了同一个组件名：
const VirtualList = Vue.component('virtual-list', {
...
})
因此，如果在同时使用两个不同版本的 vue-virtual-scroll-list，最终也只能拿到同一个组件。具体使用的是哪个组件，就看哪个版本最晚被注册。
解决方案
方案一、提 issue
最简单的解决方案，当然是在 GitHub 上给作者提 issue。但是通常这也是最慢的方案，因为这个包的作者到现在基本不维护了。我从去年提的 issue 到现在作者也没有回我🐶
方案二、使用 patch-package
patch-package 是一个可以让你给 npm 包打补丁的一个工具。
使用方法
在控制台里执行代码：
npx patch-package some-package
这样会生成一个 patch 文件。另外可以再配置一下 postinstall：
"scripts": {
+ "postinstall": "patch-package"
}
在前端部署的时候就会触发 patch-package，这个 npm 包内部会读取 patch 文件内的改动，最终把 patch 的部份塞到 node_modules 里面，我们打的补丁就可以在部署之后生效了。
方案三、Fork 过来自己维护一个版本
这个方案成本还是有点高，但是如果考虑长期维护的话还是可以这么做的。
