什么是 preload-webpack-plugin
preload-webpack-plugin 是一款基于 Webpack 的插件，可以自动为资源生成 link rel=“preload” 标签，实现预加载功能。这个功能在优化页面性能、提高用户体验方面非常有帮助。
安装 preload-webpack-plugin
安装 preload-webpack-plugin 可以使用 npm 命令：
--- ------- ---------------------- ----------
使用 preload-webpack-plugin
配置 Webpack.config.js 如下：
----- -------------------- - ----------------------------------
-------------- - -
-------- -
--- ----------------------
---- ----------
-------- ------------
-------------- -----------------------------------
-------------- -------- ---------
--------- -
-- ---------------------- ------ --------
-- ----------------------- ------ -------
-- -------------------------------------- ------ --------
------ ---------
-
--
-
--上面的例子中，PreloadWebpackPlugin 会在每个入口 chunks 中自动寻找合适的资源，并在 html 文件中嵌入相应的预加载标记。其中的配置项有：
- rel：link 元素的关系属性，它定义当前文档与链接文档之间的关系。值为 preload 表示预加载。
- include：指定为 allAssets，表示关键 request 是所有的资源文件。设置为 initial 将为应用程序的初始包加载所有依赖项。
- fileBlacklist：排除不想被 preloaded 的文件。
- fileWhitelist：只 preload 真正需要用到的文件。
- as：指定预加载资源的资源类型，对于每一个资源文件都会被调用。返回的内容必须是有效的 link rel 的 as 属性值。
实例
代码如下：
--------- ----- ------ ------ ----------------------------- ------------ ----- ---------------- ----- ---------------- ----------------- ---------- -- ----- ------------- ---------------- ---------- -- ----- ------------- ------------- ----------- -- ------- ------ ----------- -- -- -------- -------- -- - ------------- ---- --------------- ------------ ------- ---------------------- ------- -------
在上述实例中，我们已经在 html 中手动添加了 preload 标签。但是，观察上面 Webpack 配置，我们可以通过配置 PreloadWebpackPlugin，自动插入 preload 标签，省去了手动插入的步骤。
总结
preload-webpack-plugin 是一个非常实用的 Webpack 插件。它不仅能够提高页面性能，还能节约我们许多手动插入 preload 标签的时间。在项目开发的过程中，合理使用这款插件，将会有很大的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/62383