什么是 Broccoli-webp
Broccoli-webp 是一个 npm 包，它将基于 Broccoli 构建系统的图像处理能力与 WebP 图像格式相结合，为前端开发提供了一种优化网页性能的方法。
WebP 是由 Google 提供的一种新型的图像压缩格式，它可以比 JPEG 和 PNG 更高效地压缩图像，并保持高质量的图像内容。使用 Broccoli-webp 可以快速地将您现有网站上的图片转换为 WebP 格式，减少图片大小，从而提高您的网站的页面加载速度和性能。
安装 Broccoli-webp
Broccoli-webp 需要 Node.js v8.14.0+，npm v6.4.1+。
要使用 Broccoli-webp，请先安装 Broccoli 和 Broccoli-cli：
--- ------- -- -------- ------------
接着，您可以安装 Broccoli-webp：
--- ------- ---------- -------------
使用 Broccoli-webp
步骤 1：创建 Broccoli 实例
在您的项目根目录下创建一个 Broccoli 实例目录，例如 my-broccoli：
----- ----------- -- -----------
在 my-broccoli 目录下创建一个典型的 Broccoli 目录结构，例如：
--- ----------- --- --- --- --- ------ --- --- ------------ --- ----
在 Brocfile.js 中定义 Broccoli 插件的处理流程，例如：
----- ------ - ---------------------------
----- ---- - -------------------------
----- ---------- - --------------------------------
----- --------- - -------------
----- ---------- - --------------
----- ------ - --- ----------------- -
----------- -----
-------- ------------ ------------ ----------- ------------
-------- --------
---
----- ---------- - --- ------------ ----
----- -------- - -------- ------------
-------------- - -------------------- - ---------- ---- ---通过上面的代码，我们使用 Funnel 插件将 src/images 目录下的所有图片文件复制到 dist/images 目录下，并使用 WebP 插件将这些图片转换为 WebP 格式，然后将它们与源文件合并为一个文件树。
步骤 2：使用 Broccoli 构建
在 my-broccoli 文件夹下运行 broccoli serve 命令构建 Broccoli 文件树：
-- ----------- -------- -----
在成功构建 Broccoli 文件树后，您应该可以在 http://localhost:4200 看到您构建的结果。如果您更改了 Broccoli 插件或文件，Broccoli 将自动重新构建文件树，并刷新浏览器上的页面显示。
步骤 3：使用 WebP 图片
现在您已经使用 Broccoli-webp 将图片转换为 WebP 格式，接下来就可以在您的网页上使用它们了。我们可以使用 <picture> 标签来实现。
---------
------- ----------------------------- ------------------
---- ------------------------- ------- ------- -------
----------在上面的示例中，我们在 <source> 元素中指定了 WebP 图片的路径和类型，如果浏览器支持 WebP 格式，则会优先加载 WebP 图片，否则将使用 <img> 元素中指定的 JPEG 或 PNG 格式的图片。
总结
使用 Broccoli-webp 可以帮助您快速优化您的网站性能，并提高页面加载速度。通过创建 Broccoli 实例和使用 Broccoli-webp 插件，您可以快速地将您现有网站上的图片转换为 WebP 格式，并在您的网页上使用它们。如果您希望了解更多关于 Broccoli 和 Broccoli-webp 的详细信息，可以参考它们的官方文档和GitHub 仓库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c89ccdc64669dde51ad