在 Web 开发中，优化网页性能是一项非常重要的工作。其中，优化缓存是一个非常有效的方法。在前端开发中，图片是非常常见的资源，而且图片文件通常比较大，因此优化图片缓存是非常有必要的。本文将介绍如何在 Webpack 中给图片打上 Hash 以优化缓存。
为什么要给图片打上 Hash
在 Web 开发中，浏览器缓存是一个非常重要的概念。浏览器缓存可以减少网络请求，提高网页加载速度。但是，如果缓存的文件发生了变化，浏览器就需要重新请求文件，这样就会影响网页的性能。为了避免这种情况，我们可以给文件打上 Hash，当文件内容发生变化时，文件名也会发生变化，这样浏览器就会重新请求文件。
对于图片来说，如果图片文件名没有改变，即使图片内容已经发生了变化，浏览器也会使用缓存的图片。这样就会导致网页显示的不是最新的图片。为了避免这种情况，我们可以给图片打上 Hash，当图片内容发生变化时，图片文件名也会发生变化，浏览器就会重新请求图片。
如何给图片打上 Hash
在 Webpack 中，我们可以使用 file-loader 和 url-loader 来加载图片。这两个加载器都支持给文件打上 Hash。
使用 file-loader
file-loader 可以将文件复制到输出目录，并返回文件名。我们可以使用 output.filename 和 output.chunkFilename 配置选项来给文件打上 Hash。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
--------- --------------------------
-------------- --------------------------
--
------- -
------ -
-
----- --------------------------
---- -
-
------- --------------
-------- -
----- -----------------------------
----------- ---------
--
--
--
--
--
--
--上面的配置将图片复制到输出目录的 images 子目录中，并给图片文件名添加了 Hash。
使用 url-loader
url-loader 可以将文件转换成 Base64 编码的 Data URL，如果文件大小小于指定的限制，就会返回 Data URL，否则就会使用 file-loader 处理文件。我们可以使用 output.filename 和 output.chunkFilename 配置选项来给文件打上 Hash。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
--------- --------------------------
-------------- --------------------------
--
------- -
------ -
-
----- --------------------------
---- -
-
------- -------------
-------- -
------ -----
----- -----------------------------
----------- ---------
--
--
--
--
--
--
--上面的配置将图片转换成 Base64 编码的 Data URL，如果文件大小小于 8KB，就会返回 Data URL，否则就会使用 file-loader 处理文件。同时也给图片文件名添加了 Hash。
总结
在 Web 开发中，优化缓存是非常重要的。给文件打上 Hash 是一个非常有效的方法。对于图片来说，我们可以使用 file-loader 或 url-loader 来加载图片，并给图片打上 Hash。这样可以避免图片缓存导致网页显示的不是最新的图片，提高网页性能。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65def4fe1886fbafa4c3c022