Vue路由懒加载-列表页跳转到详情页的问题

今天分享一个appH5开发过程中遇到的问题。

涉及技术：Vue、Vue-router、浏览器http请求并发限制与等待机制

Vue用了路由懒加载，某一个列表页与详情页均懒加载。在列表页存中封面图片时，在所有的封面图片加载完之前，无论如何点击也进入不了详情页。

首先这是一个列表页，我们把它叫做列表页A,可以看到它的列表是加载出来了，但是其中的封面图片还正在加载。

这个页面用了路由懒加载，为什么用懒加载，因为对于单页面应用来说懒加载真是太好了

 

 然后点击列表中的任意一个列表项，会跳转到详情页，以点击左列第一个为例

当然，详情页也用了懒加载，为什么用懒加载，因为对于单页面应用来说懒加载真是太好了

然后就出现了 问题：当列表页的所有列表项的封面图片没有加载完成时，无论如何点击列表项都不会跳转

因为列表页有路由缓存，先来看看点击后的函数执行到了哪里

可以看到，疯狂点击几十次，也没有跳转

因为有些列表项的封面图片没有完全加载出来，但是这个和我们跳转到详情页理论上是没有关系的，因为详情页里不需要封面图片，详情页中的图片地址的单独请求的

在排除点击事件异常、路由缓存异常等因素后，将目光聚焦在http请求上。

随后查看了页面的network

这是各种封面图片

 

这是请求JS

发现详情页的28.js等待 了15s，所以恍然大悟，这里出现了http等待！而出现等待的原因，常见于浏览器或者小程序对于http请求并发数量的限制，只要超过了限制数量，那么剩下的请求必须进入等待状态，但是状态是pending。

也就是说，刚刚进入列表页时，列表项封面图片的路径被请求回来了，正在请求一份又一份的封面图片。然后这个时候你又突然点了一下列表项，想跳转。于是去请求详情页组件的js-28.js

 但是呢，前面封面图片的http请求正在排队呢，所以插队滴哒咩！所以只能等待啦，等到之前排着队的图片请求回来，才能轮到页面的js。列表页做了懒加载，所以只等15s，要是不做，怕是几百张图片等个半个小时。

PS:这些js 是使用了路由懒加载，webpack、Vue异步组件技术等生成的,没接触过的老表可以自己去了解一下

解决方案：

既然找到了问题，那就好解决了。

方案就是：如何在列表页中就加载详情页的js，或者说让列表页和详情页的组件js同时加载。

直接上代码：

webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。 

如此这般，如此这般，可以看到图片还没加载完，party.js已经请求回来了。此时点击任意列表项，也是可以立刻跳转的。完美解决！

 如果有其他方案解决的小伙伴欢迎分享！么么哒！