前言

最近在搞前端老项目的优化事情，目标是提高首屏速度，减少打包体积。 为了把体积降下来，于是我就对一些业务组件包进行了抽离，通过动态挂载cdn链接的方式获取，不打包进本地的文件了。 本来一切都很nice ，直到我更换了一个图片相关的组件，问题就来了，页面上的tab组件无了，但是我手动切换路由之后消失的tab组件又回来了。

问题样式：

正常样式：

可以看到上面只剩下一条线了。

问题解决

首先可以确定是，我更换了一个图片相关组件时，这个问题就出现了。

而我的操作是把将这个组件通过挂载链接的方式去加载，不同于直接导入，我这个挂载行为是一个异步操作。

那我们现在就得去思考一下，为什么组件异步导入会使得另一个风马牛不相及的组件直接消失了？

现在拿到的信息还很少，不妨再去看看控制台。

可以看到管理台报错了，这个组件没注册。

看回去项目，这个组件的确没注册，重新注册下组件=

重新运行，果然tab 成功渲染。

原因分析

上面的修复中，我们确定了原因是由于组件没注册，但是为什么之前没注册也可以正常显示呢？

我去排查了组件包的代码，果然组件库注册了这个组件。 因为组件注册的是全局的，所以当我们同步导入这个组件包的时候，就给我们注册了这个幽灵组件。

初始化流程是同步的，当我们异步挂载组件的时候，这个幽灵组件可能还没注册，所以我们页面就会丢失tab，当我们切换路由时，组件已经完成注册，所以又正确展示。