如果您经常在 web 开发中使用图片，那么您一定了解对站点性能的影响。此时，WebP 可以是一个好的解决方案。WebP 是 Google 推出的一种旨在提供更快速、更小和更美观的图像格式。
towebp-loader 是一个 Webpack loader ，可以将图片转换为 WebP 格式。在本篇文章中，我们将深入了解如何使用 towebp-loader，以便优化我们的网站并提高性能。
安装
要安装 towebp-loader，我们可以使用 npm 命令行工具：
--- ------- ---------- -------------
配置
towebp-loader 可以与 Webpack 配合使用。在 Webpack 配置文件中，我们只需添加以下代码：
-------------- - -
------- -
------ -
-
----- ------------------
------- ----------------
-------- -
-------- ---
--
--
--
--
--在上面的示例中，我们定义了在我们项目中使用 towebp-loader 的方式。只有在 Webpack 打包图片时，它才会生效，格式必须是 png 或 jpeg。
options
towebp-loader 具有几个选项，可以使用 options 字段进行配置：
quality: 图像压缩质量，范围从 0 到 100，默认值为 80。target: 转换到 WebP 图像的目标格式。默认值为 'webp'。
示例代码
在我的项目中，我们有一组 PNG 格式的图片，我将它们命名为 image-01.png、image-02.png 和 image-03.png。现在，我将向您演示如何使用 towebp-loader 将它们转换为 WebP 格式。
首先，让我们在项目根目录中创建一个测试文件夹，并将这三个图片文件放在里面。接下来，我们可以通过创建一个基本的 HTML 文件来测试此代码是否有效。以下是测试文件：
--------- -----
------
------
----- ----------------
-------------------- ------------
-------
------
----------------- ---------
---- -------------------------- ---------- ----
---- -------------------------- ---------- ----
---- -------------------------- ---------- ----
-------
-------现在，我们可以继续配置 Webpack，以确保所有 PNG 格式的文件在编译期间都被转换为 WebP 格式。
-------------- - -
----- --------------
------ -----------------
-------- --------------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ------------------
------- ----------------
-------- -
-------- ---
--
--
-
----- ----------------
----- -----------------
--
--
--
--最后，我们可以使用 npm 启动本地服务器，以便在浏览器中查看测试文件：
--- ------- -- ------------------ --- ------------------
现在，您可以在浏览器中访问 http://localhost:8080，并查看是否看到了转换后的 WebP 图像。
总结
在本文中，我们介绍了如何使用 towebp-loader，将 PNG 和 JPEG 格式的图像转换为 WebP 格式。我们了解了如何配置选项，并提供了一个示例代码，以帮助您了解如何在项目中应用此工具。
通过使用 towebp-loader，我们可以减少图像的大小，从而加快网站的加载速度，提高站点性能。希望这篇文章对您有所指导和帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600556b781e8991b448d3826