前言

还记得那是一个风和日丽的下午，我猜的，我只能看到办公室的窗户缝里有一丝亮光。刚刚按照任务列表完成了一个功能。伸了伸懒腰，要去接一杯水，突然，我看到了微信的小图标不停的闪烁。。。管他呢，先接了水再说。

我转身接了一杯水，放到右手边靠桌角的位置上。点开闪烁的图标，我看到了远在异地组长的聊天消息，有人反馈动态加载页面的弹窗，首次打开会被卡很久，并且加载了它并不需要的js文件。。。排查一下是不是按需加载失效了。

看到这个消息，完成一个功能的松懈感马上被bug收走了，今天出门肯定是忘记祈祷了，怎么又来了这么无厘头的问题。

每次面对问题，我都会先调整好自己的心态，相信自己，不管什么样的问题，都不会难倒前端小玉儿这个经历过大大大项目的人。

问题排查与解决

从消息中可以看到，被卡页面打开时，会加载它不需要的js文件，这是一个非常关键的信息。于是我打开项目登录页，登录页同样加载了所有依赖对应的js文件，看来按需加载确实失效了。

为了排查具体的原因，我重点看了动态加载页面弹窗，因为，问题最先表现是这里，抓住了重点页面，我开始进行调试。

我先把动态加载组件的代码进行了注释，果然，再次打开弹窗时，成了空白，也不加载那些没有必要的依赖了。自己创建一个只有几个文字的组件，把动态加载组件放开，点击打开弹窗，依然是卡死的状态。基本确认，动态加载组件导致了这个问题。

再看一下，之前的动态加载组件是如何实现的

javascript 复制代码

Vue.component('customCom', require(`@/custom${custompath}`).default)

很明显，组件的路径包含变量，之前的开发中使用了require方法进行引入。

问题根本原因在于require方法是编译时执行，它会把@/custom目录下的所有文件打包到一个大的js文件里面，因为它不确定运行时需要哪个文件。

找到了原因，解决问题就容易多了。如果希望按需加载，只要能使动态加载组件在运行时执行就可以了。那就剩下一种选择了，import()方法。

javascript 复制代码

Vue.component('customCom', () => import(`@/custom${newval}`))

到此，前端小玉儿的问题完美解决了。

这里敲下黑板，注意前端小玉儿排查问题技巧总结如下三点：

在此，一个老前端叮嘱各位开发者：

发现可疑代码后，一定要找出导致问题的根本原因，这也是倒逼自己去学习原理的好机会。

我周围也有些同事，在发现问题后，不知道根本原因，代码稀里糊涂跑起来了，但是没过几天又出现了其他问题，给项目埋下很多地雷，在后面的日子里，每天都有被炸出一身奥利给的风险。