webpack 实现prefetch、preload如何借助webpack实现自定义prefetch、preload呢？

如何借助webpack实现自定义prefetch、preload呢？

以下方案可供参考：

1、代码分离

webpack v4.6.0+ 增加了对预获取和预加载的支持。

在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 "resource hint(资源提示)"，来告知浏览器：

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

// 这将导致<link rel="prefetch" href="login-modal-chunk.js">被附加到页面的头部，这将指示浏览器在空闲时间预取login-modal-chunk.js文件。
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');

// 当一个使用ChartingLibrary的页面被请求时，这个图表库块也会通过<link rel="preload">被请求。
import(/* webpackPreload: true */ 'ChartingLibrary');

2、插件

PrefetchPlugin：预取出普通模块请求(module requeset)，可以让这些模块在他们被import或者是require之前就解析并且编译，形如：new webpack.PrefetchPlugin([context], request)。
preload-webpack-plugin：一个自动将异步js chunks 使用引入的webpack插件。