对于前端开发者来说，提升网站性能一直是很重要的课题。而其中图片的加载速度对于网站的性能优化起到了至关重要的作用。在这篇文章中，我们将探讨如何使用 Webpack 优化图片加载。
Webpack 简介
Webpack 是一个前端打包工具，可以将各种文件（如 JavaScript、CSS、图片等）打包合并为一个或几个文件，以便于在网页上加载。它的主要优点是可以提高页面加载速度，同时还可实现代码分割、模块热替换等功能。
图片加载的问题
图片是网站中不可或缺的一部分，但过多的图片却会使网站加载变慢。这是因为浏览器需要发送多个独立的请求来获取图片，而每个请求都会消耗服务器和客户端的资源，并且浏览器还需要等待每个请求的响应才能加载完整个页面。
为了避免这个问题，可以通过对图片进行优化来减小其大小，从而减少加载时间。这可以通过使用 Webpack 中的一些优化技术来实现。
Webpack 优化图片加载的方法
1. 图片压缩
图片压缩是减小图片大小的一种简单方法。在 Webpack 中，可以使用 image-webpack-loader 来压缩图片。该插件使用了诸如 pngquant、mozjpeg 等库来自动压缩图片大小，从而减少文件大小。
示例代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ----------
--------- ------
--
--
-
------- -----------------------
-------- -
-------- -
------------ -----
-------- ---
--
-------- -
-------- ------
--
--------- -
-------- ------ -----
------ --
--
--------- -
----------- ------
--
----- -
-------- ---
--
--
--
--
--
--
--
--上面的代码中，file-loader 用于加载图片，image-webpack-loader 用于压缩图片。
2. 懒加载图片
另一种优化图片加载时间的技术是懒加载。懒加载可减少初始页面加载时间，并在用户滚动到图片时才加载它们。
在 Webpack 中，可以使用 intersection-observer 来检测何时加载图片。该 API 可以告诉我们何时一个元素进入或退出视口（viewport）。
示例代码：
-- -------------------- ---- -------
-- ----------------------- -- ------- -
----- -------- - --- ------------------------------------ -
----------- -------
---------- ----
---
------------------------------------------------- -- -
----------------------
---
- ---- -
-- -------- ----
-
-------- ----------------------- -
----------------------- -- -
-- ---------------------- -
----- --- - -------------
------- - ----------------
----------------------------
------------------------
-
---
-上面的代码使用了 IntersectionObserver，当图片进入视口时，它将被加载并替换为 data-src 属性的值。当图片加载完成后，还将添加一个 .loaded 类，以便于为其应用样式。
3. WebP 图片格式
WebP 是一种新型的图像格式，采用了比 JPEG 和 PNG 更先进的压缩算法，从而减小了图像文件的大小，同时可保持更高的质量。WebP 格式比 PNG 和 JPEG 格式的文件大小要小得多，因此它是更快速加载的选择。
在 Webpack 中，可以使用 webp-loader 来将图片转换为 WebP 格式。
示例代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ----------
--------- ------
--
--
-
------- --------------
-------- -
-------- ---
--
--
--
--
--
--
--上面的代码中，file-loader 用于加载图片，webp-loader 用于将图片转换为 WebP 格式。
结论
在本文中，我们学习了如何使用 Webpack 优化图片加载。我们使用了 image-webpack-loader 压缩图片、IntersectionObserver 实现懒加载图片、webp-loader 将图片转换为 WebP 格式的方法。这些技术可以帮助提高网站性能，并缩短页面加载时间。
参考资料
- Webpack Image Loading and Optimisation Techniques
- Webpack 4: Code Splitting, Lazy-loading and Other Advanced Techniques
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff86d01b0bf82c71cb547e