prefetch preload 同步

Question

按老师讲的概念为：
prefetch是核心代码加载后，等带宽空闲，才加载其他代码
preload 是核心代码加载后，立即加载其他代码
问题1:
核心代码加载完毕不等于带宽空闲？带宽空闲下来需要一定的时间?
问题2:
preload在核心代码加载完毕后，主页面会不会显示出来？
如果不显示，到问题3
如果显示，到问题4
问题3：
那么现在的preload与同步有什么区别呢？
问题4
如果显示了，那么prefetch和preload所显示效果一样呀，为何要说prefetch比preload优呢？
问题5：preload适用于什么情况？

Answer 1

_小_七_ 2019-08-26 23:34:45

preload这个会把加载权限提到较高级别，浏览器加载的时候会默认先加载它，prefetch的加载的权限最低，不会立即加载。

看下面的图，在head标签中，有一堆prefetch的资源在前面，但是后面有几个preload的，在network中可以看到preload的资源权限都是high或者highest的，后面那些lowest都是prefetch的。都是在带宽空闲时下载的

Answer 2

慕的地3235831 2019-08-11 04:06:26

根据英文文档介绍

1. Preload： A preloaded chunk starts loading in parallel to the parent chunk.

   所以Proload应该是和核心代码同时（in parallel）加载

2. 两者的区别： 

    第一： 下载的时间点不同

              对于prefetch，是在带宽空闲的时候下载。

              对于preload，是立刻下载。（is instantly downloaded）。 

    第二： preload chunk 和 prefetch chunk 被核心代码请求（call）的时间点不同

              对于prefetch，在未来的某一个时刻会被请求，例如老师给的登录这个例子。

              对于preload，是立刻被请求。

3. 什么情况下用Proload：

    想象以下的情况： 

                          一个主页上有一个组件，该组件需要引入一个比较大的库。当主页被加载完成之后会立刻请求这个组件，

                          那么这个组件在引入这个库的时候需要使用proload 

1	import(/* webpackPreload: true */ 'biglibrary');

                          当打包完成，主页生成一个page-chunk，这个比较大的library也会生成一个big-library-chunk。

                          假设page-chunk文件大小远远小于big-library-chunk。

                          因为在引入biglibrary的时候，使用了preload。所以主页的page-chunk和biglibrary-chunk会被同时加载。刚在前面已经假设page-chunk文件大小远远小于big-library-chunk，所以结果是主页会被先加载完成，等待big-library-chunk加载完成。

                          最后等big-library-chunk加载完成，主页会立刻请求（call）这个组件。

                          因为是同时加载，会比先加载page-chunk再加载biglibrary-chunk快一些。

以上是我对proload的一些理解，希望能帮助到你。

• 提问者 宝慕林9115267 #1

  1. Preload： A preloaded chunk starts loading in parallel to the parent chunk.
     所以Proload应该是和核心代码同时（in parallel）加载
  
  我也是认为和核心代码同时加载
  那么就是讲师说的有错误
  
  谢谢你，这么用心的回答，码了这么多字，很感谢