Vue.js的某个页面组件比较大的时候首次切换进入这个页面比较慢如何优化？

Question

这两天用vue+elementUI做的项目，一个页面因为require了地图json数据。打包的时候组件对应的js文件大了不少，上M了。这样导致切换路由进入这个页面的时候点了没反应。过个好几秒才切换到这个页面。我看了一下控制台，这几秒的时间是在加载这个组件对应的js文件。
那么问题来了，我点击导航切换路由的时候为什么不是直接切换到对应的页面了，然后才开始加载这个js文件？
首先，路由懒加载已经设置，其他页面应该是js文件比较小没这么明显，感觉不出来卡顿。但是这个页面的js文件太大了卡顿很明显。正常的就应该点了马上切换，这样先进入新路由了即使文件大加载慢我也可以给个正在加载的提示什么的来优化用户体验。
有没有大神遇到这样的情况，还请指点迷津

Answer 1

因为对应的包没有加载好之前，是没有这个页面的
你需要的应该是，把地图功能和页面的其他部分分离开，然后在页面加载时异步加载这个组件，这样就可以更快的渲染好这个页面，然后通过loading状态来输出等待信息

Answer 2

路由的页面内容，其实也是在这个js文件里面

Answer 3

问题不在 vue，在于你引用的地图文件过大，渲染慢也不是 vue 的问题，而是因为地图文件太大导致要渲染的节点太多了，你可以用工具压缩一下地图文件，我之前试过直接用 echarts 提供的世界图，电脑性能好也一样卡，可以试一下这个工具 http://blog.giscafer.com/maps...，把图源压缩一下