什么是 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：
npm install -g broccoli broccoli-cli
接着，您可以安装 Broccoli-webp：
npm install --save-dev broccoli-webp
使用 Broccoli-webp
步骤 1：创建 Broccoli 实例
在您的项目根目录下创建一个 Broccoli 实例目录，例如 my-broccoli：
mkdir my-broccoli cd my-broccoli
在 my-broccoli 目录下创建一个典型的 Broccoli 目录结构，例如：
├── Brocfile.js ├── src │ └── images │ └── example.jpeg └── dist
在 Brocfile.js 中定义 Broccoli 插件的处理流程，例如：
-- -------------------- ---- -------
----- ------ - ---------------------------
----- ---- - -------------------------
----- ---------- - --------------------------------
----- --------- - -------------
----- ---------- - --------------
----- ------ - --- ----------------- -
----------- -----
-------- ------------ ------------ ----------- ------------
-------- --------
---
----- ---------- - --- ------------ ----
----- -------- - -------- ------------
-------------- - -------------------- - ---------- ---- ---通过上面的代码，我们使用 Funnel 插件将 src/images 目录下的所有图片文件复制到 dist/images 目录下，并使用 WebP 插件将这些图片转换为 WebP 格式，然后将它们与源文件合并为一个文件树。
步骤 2：使用 Broccoli 构建
在 my-broccoli 文件夹下运行 broccoli serve 命令构建 Broccoli 文件树：
cd my-broccoli broccoli serve
在成功构建 Broccoli 文件树后，您应该可以在 http://localhost:4200 看到您构建的结果。如果您更改了 Broccoli 插件或文件，Broccoli 将自动重新构建文件树，并刷新浏览器上的页面显示。
步骤 3：使用 WebP 图片
现在您已经使用 Broccoli-webp 将图片转换为 WebP 格式，接下来就可以在您的网页上使用它们了。我们可以使用 <picture> 标签来实现。
<picture>
<source srcset="/images/example.webp" type="image/webp">
<img src="/images/example.jpg" alt="An example image">
</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