简介
webup-preset-http2 是一个基于 Webpack 的预设，它可以帮助我们将项目中的文件与依赖转化为支持 HTTP/2 协议的代码，并对其进行优化。
HTTP/2 协议在传输过程中可以并发传输多个文件，从而提高页面加载速度和网络性能，这种协议也被越来越多的浏览器、服务器和网站所采用。使用 webup-preset-http2 可以让我们轻松拥抱 HTTP/2。
安装
使用 npm 进行安装：
npm install webup-preset-http2 --save-dev
使用
在 webpack 配置文件中引入 webup-preset-http2，并将其作为一个预设使用：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------ - - --------------------------
----- ----- - ------------------------------
----- ------ - --------------
-- ----------
-------
---
-------------- - -------这是一个最基本的配置，webup-preset-http2 会自动分析项目的依赖关系，并将相关的模块合并到一个或多个 HTTP/2 流中，从而达到最佳的传输效果。
我们还可以在选项中进行其他一些配置，比如，默认情况下，webup-preset-http2 会将所有的 CSS 文件提取到一个独立的样式表中，我们可以通过 extractCss 进行关闭：
http2({
extractCss: false
})更多的选项可以在官方文档中找到。
深入
HTTP/2 流
在 HTTP/2 中，客户端请求的所有资源都被分成一个个流（Stream），每个流都有一个唯一的标识符和优先级，它们可以并发地传输和处理。
我们可以通过 HTTP/2 流将多个小文件合并为一个大文件进行传输，从而提高网络性能。
webup-preset-http2 会通过分析项目的依赖关系，将相关的文件合并到同一个 HTTP/2 流中，并将其压缩为一个单独的文件进行传输。在浏览器端，这个文件会被解压并还原为原来的多个小文件。
HTTP/2 Server Push
在 HTTP/2 中，我们还可以通过 Server Push 的方式，将资源预加载到客户端，从而进一步提高页面加载速度和性能。
webup-preset-http2 会自动检测页面中的链接，并在服务器端主动推送相关的资源到客户端。这个过程可以大大缩短客户端请求资源的时间和数量，从而加速页面的加载。
定制
除了使用预设外，我们还可以对 webup-preset-http2 进行定制化配置，以满足项目的特定需求。
我们可以通过 http2.block 方法创建一个 webpack-blocks 模块，并将其作为 webup-preset-http2 的选项传入：
-- -------------------- ---- -------
----- - ------- ------- - - --------------------------
----- ----------- - -- -- -
---------
---------
--
-------
------ -----------
--这个例子是为 webup-preset-http2 添加了 Stylus 处理和 PostCSS 处理，这样我们就可以自由地添加一些自定义模块和插件，以满足自己的需求。
示例代码
为了更好地理解 webup-preset-http2 的使用和效果，我们可以创建一个简单的示例项目来尝试。
我们首先创建一个新项目，安装必要的依赖：
mkdir http2-sample cd http2-sample/ npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader --save-dev
然后，我们在项目根目录下创建一个 index.html 文件和一个 src 文件夹，其中 src 文件夹存放我们的样式和 JavaScript：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- ---------------------------- ------------------
------------- --------------
----- ---------------- -----------------
-------
------
---------- ------------
------- ---- ---------
----
--------------
---------------
---------------
-----
------- -----------------------
-------
--------- -------------------- ---- -------
---- -
------------ ------ -----------
-------- -----
-
-- -
---------- -----
-
- -
------ -----
-
-- -
----------- -----
-
-- -
------------ -----
---------- -----
-const $ = require('jquery');
$(function() {
console.log('Hello, HTTP/2!');
});我们在 Webpack 配置文件中添加 webup-preset-http2，并将其作为一个预设使用：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------ - - --------------------------
----- ----- - ------------------------------
----- ---------- - -------------------------------
----- ------ - --------------
--------
-- -- --
-------- -
--- ------------
--------- --------------
--
-
--
---
-------------- - -------在终端中执行 npm run start 命令，访问 http://localhost:8080，可以看到效果。
通过 Chrome 浏览器的开发者工具中的 Network 面板，我们可以看到依赖文件已经被合并为一个 HTTP/2 流进行传输，并且在 Server Push 下，浏览器已经提前获得所需的资源，并在页面加载时自动解压和使用。
结论
通过使用 webup-preset-http2，我们可以充分利用 HTTP/2 协议的优势，并在性能和速度上取得极大的提升。
作为前端工程师，我们应该更加关注和关心网络性能和用户体验，通过学习和使用类似的工具和技术，我们可以更好地优化自己的项目，提高用户的满意度。
我们还需要保持对前端技术的了解和关注，学习更多的前端知识，并将其应用到实践中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1c81e8991b448dab4b