webpack Prefetching/Preloading

1：是什么

preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。

Prefetching：设置这个指令，就表示允许浏览器在后台（空闲时）获取将来可能用得到的资源，并且将他们存储在浏览器的缓存中。
这两种其实都是webpack提供的资源加载优化的方式，反正如果就是设置了这几个指令，就会先走个http的缓存，然后下次再次请求的时候直接从缓存里面拿，这样就节省了加载的时间。

 

设置Prefetching  

使用魔法注释的方式，在需要预加载的地方添加：

document.body.addEventListener("click", () => {
+ import(/* webpackPrefetch: true */ "./footer.js").then(module => {
    console.log(module);
    module.createFooter();
  });
});

设置Preloading

document.body.addEventListener("click", () => {
+ import(/* webpackPreload: true */ "./footer.js").then(module => {
    console.log(module);
    module.createFooter();
  });
});

 

 

Preloading什么时候用呢？比如说，你页面中的很多组件都用到了jQuery，比较强依赖这个东西，那么我们就可以当import引入jQuery库的时候设置为Preloading，让他预加载一波。

而Prefetching我们一般用的比较多，也比较好理解，用官网的例子来说：一般当我们进入一个网站首页，只有当点击登录按钮的时候模态框才需要弹出来，那么我们就可以对这个login模态框组件做下Prefetching，当首页加载完毕，浏览器空闲的时候提前加载一下，这样当用户点击登录按钮就可以直接从缓存里面加载这个组件了。