webpack魔法注释-预获取/预加载模块

Webpack v4.6.0+ 增加了对预获取（prefetch）和预加载（preload）的支持。

在声明 import 时，使用下面这些内置指令，可以让 webpack 输出“resource hint”，来告知浏览器：

• prefetch（预获取）：将来某些导航下可能需要的资源
• preload（预加载）：当前导航下可能需要资源

下面这个预获取的简单示例中，有一个 HomePage 组件，其内部渲染一个 LoginButton 组件，然后在点击后按需加载 LoginModal 组件。

LoginButton.js

//...
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');

 这会生成 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部，指示浏览器在闲置时间预取 login-modal-chunk.js 文件。

生成的link标签，可以看到rel为prefetch:

参考文档： 

代码分离 | webpack 中文文档 | webpack中文文档 | webpack中文网