前言
还记得那是一个风和日丽的下午，我猜的，我只能看到办公室的窗户缝里有一丝亮光。刚刚按照任务列表完成了一个功能。伸了伸懒腰，要去接一杯水，突然，我看到了微信的小图标不停的闪烁。。。管他呢，先接了水再说。
我转身接了一杯水，放到右手边靠桌角的位置上。点开闪烁的图标，我看到了远在异地组长的聊天消息，有人反馈动态加载页面的弹窗，首次打开会被卡很久，并且加载了它并不需要的js文件。。。排查一下是不是按需加载失效了。
看到这个消息，完成一个功能的松懈感马上被bug收走了，今天出门肯定是忘记祈祷了，怎么又来了这么无厘头的问题。
每次面对问题，我都会先调整好自己的心态，相信自己，不管什么样的问题，都不会难倒前端小玉儿这个经历过大大大项目的人。
问题排查与解决
从消息中可以看到，被卡页面打开时，会加载它不需要的js文件，这是一个非常关键的信息。于是我打开项目登录页，登录页同样加载了所有依赖对应的js文件，看来按需加载确实失效了。
为了排查具体的原因，我重点看了动态加载页面弹窗，因为，问题最先表现是这里，抓住了重点页面，我开始进行调试。
我先把动态加载组件的代码进行了注释，果然，再次打开弹窗时，成了空白，也不加载那些没有必要的依赖了。自己创建一个只有几个文字的组件，把动态加载组件放开，点击打开弹窗，依然是卡死的状态。基本确认，动态加载组件导致了这个问题。
再看一下，之前的动态加载组件是如何实现的
javascript
Vue.component('customCom', require(`@/custom${custompath}`).default)很明显，组件的路径包含变量，之前的开发中使用了require方法进行引入。
问题根本原因在于require方法是编译时执行，它会把@/custom目录下的所有文件打包到一个大的js文件里面，因为它不确定运行时需要哪个文件。
找到了原因，解决问题就容易多了。如果希望按需加载，只要能使动态加载组件在运行时执行就可以了。那就剩下一种选择了，import()方法。
javascript
Vue.component('customCom', () => import(`@/custom${newval}`))总结
这里敲下黑板，注意前端小玉儿排查问题技巧总结如下三点：
- 仔细分析bug的表现并进行验证，锁定问题文件
- 锁定可疑代码：使用代码排除法，比如删除可疑代码再添加回来
- 可疑代码分析，找出根本原因
在此，一个老前端叮嘱各位开发者：
发现可疑代码后，一定要找出导致问题的根本原因，这也是倒逼自己去学习原理的好机会。
我周围也有些同事，在发现问题后，不知道根本原因，代码稀里糊涂跑起来了，但是没过几天又出现了其他问题，给项目埋下很多地雷，在后面的日子里，每天都有被炸出一身奥利给的风险。