prefetch与preload的一点重要区别

今天读完这篇文章 Prebrowsing 后，在最近新上线的网站上尝试使用了下preload，发现有点小问题在这里记录下。

我在项目中添加了 preload-webpack-plugin 来插入preload link。然后我们可以看到下图的结果。 前四个script 请求都是preload的script， 红色框内的script 才是我们web应用需要尽快执行的js，所以从图中可以看到问题很严重也明显。

preload的script代码会被优先加载，并且会占用http并发数，导致我们页面的js被stalled(waterfall中那个灰色线段)，从而也导致页面加载时间变长，特别是首屏时间会变长。优化变成了慢化，尴尬。。。

preload的结果

后面改成prefetch后，结果如下图所示，红色框内的应用js被第一时间加载，prefetch的script被安排在后面加载，这样才达到了优化效果