Vue项目路由切换速度慢，如何优化提升流畅度？

本文共计927个文字，预计阅读时间需要4分钟。

问题定位：随着项目增大，有一天突然发现页面切换时，要等1-2秒页面才切换过去，然后就开始定位问题。

原因分析：刚开始以为时页面组件太多导致的，通过删除组件，发现没有什么改善，然后才开始定位问题。

问题定位：

随着项目增大，有一天突然发现页面切换时候，要等1-2s页面才切换过去，然后就开始定位问题，刚开始以为时页面组件太多导致的，通过删除组件，发现没啥改善，然后就在两个页面打印日志，第二页面created周期时间和路由切换时间相差不大，可以排除是页面渲染耗时。然后在第一个页面的destroyed周期里面打印日志，发现destroyed->router切换耗时1.5s左右，这时候定位问题是vue的destroyed周期耗时。

destroyed周期耗时：

这时候就考虑destroyed为啥要那么久，这时候就很纳闷，第一反应肯定是页面组件太多，这是把组件都删了，还是很慢，然后页面就剩下一个表格和查询条件，然后就想是不是数据量太大导致destroyed耗时，然后就查页面接口，发现有个list接口有4000多条数据，然后去掉接口，页面切换立马流畅了；就想数据多为啥导致销毁耗时，然后就想到了这个list是下拉框，这4000多条数都渲染在页面上，销毁不耗时才怪呢。