12、webpack从0到1-Prefetching/Preloading

简单说下webpack中关于Prefetching/Preloading的设置。
git仓库：webpack-demo

1、是什么？

• 首先解决的第一个问题就是prefetching和preloading这两个是个啥子东西？
• preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。
• Prefetching：设置这个指令，就表示允许浏览器在后台（空闲时）获取将来可能用得到的资源，并且将他们存储在浏览器的缓存中。
• 这两种其实都是webpack提供的资源加载优化的方式，反正如果就是设置了这几个指令，就会先走个http的缓存，然后下次再次请求的时候直接从缓存里面拿，这样就节省了加载的时间。
• 看到这里如果你懵逼了，我这里丢两个链接，你去看看，然后下面我们具体通过实践体会一下。
  • webpack-Prefetching/Preloading modules
  • 什么是 Preload，Prefetch 和 Preconnect？

2、开始

• 延续我们前面章节的代码，我们现在假设一个需求：对于footer.js底部栏来说，只有当页面body点击的时候才挂载上来。
• import()方法是es6的动态加载模块方法，–>阮老师import讲解。

  import { createLogo } from "./logo";
  import { createHeader } from "./header";
  import { createContent } from "./content";
- import { createFooter } from "./footer";

  createLogo();
  createHeader();
  createContent();
- createFooter()

// 动态加载footer模块
+ document.body.addEventListener("click", () => {
+   import("./footer.js").then(module => {
+     console.log(module);
+     module.createFooter();
+   });
+ });

• 只有当我们点击页面的时候才会引入，这样我们就实现了动态的import引入footer模块了，ok，打包看一下。
• 这个0.bundle.js就是footer.js经过codeSpliting代码分割以后所输出的文件，文件名什么的都能改，上章都有提及–>webpack从0到1-CodeSplitting代码分割。

3、设置Prefetching

• 那接下来设置一下Prefetching，很简单:

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

• 但我们再次刷新浏览器打开控制台你就会看到，我们没有点击页面的时候它就会帮我自动先加载一遍0.bundle.js，然后当我们点击页面动态加载的时候，就是直接走的缓存了。
  

4、设置Preloading

• 关于设置Preloading的就没有什么好说的了，其实也就是加一行代码，上面同样的位置设置为/* webpackPreload: true */就行了。

• 两者的异同官网都有解释，中文文档也有，我就直接贴图了：
  

• 最后我们小结一下。

5、小结

• 其实webpack官网对于这两个东西的解释我觉得就比较到位了，Preloading什么时候用呢？比如说，你页面中的很多组件都用到了jQuery，比较强依赖这个东西，那么我们就可以当import引入jQuery库的时候设置为Preloading，让他预加载一波。
• 而Prefetching我们一般用的比较多，也比较好理解，用官网的例子来说：一般当我们进入一个网站首页，只有当点击登录按钮的时候模态框才需要弹出来，那么我们就可以对这个login模态框组件做下Prefetching，当首页加载完毕，浏览器空闲的时候提前加载一下，这样当用户点击登录按钮就可以直接从缓存里面加载这个组件了。

参考链接:
webpack-Prefetching/Preloading modules
什么是 Preload，Prefetch 和 Preconnect？