介绍
hangar51-loader 是一个针对 webpack 的 loader，它可以将Webpack打包后的资源文件中的 PNG, JPEG, GIF 和 SVG 图片中的颜色信息提取出来，并以 CSS 变量的形式输出。
使用hangar51-loader可以极大的提升Web站点性能。因为在很多情况下，我们的网站上会有很多相似但是颜色不同的图片（比如不同商品的图片），在使用hangar51-loader后，浏览器就只需要加载一种颜色的图片，然后通过CSS变量去改变图片颜色，就可以得到多种颜色的图片了，这样就可以避免重复加载相同的图片资源，提升网站的性能。
安装
使用npm安装hangar51-loader：
npm install hangar51-loader
配置
在webpack配置文件中加入如下配置项：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
------- ------------------
-------- -
---------- ---------------
------------ -----------------
----- -------------------------
-
-
-
-
-可以提供一些配置项来自定义生成的CSS变量的名称和要处理的文件类型。
示例
-- -------------------- ---- ------- -- ----------- -- ---- - ----------------- ----------------- - ---- - ----------------- ----------------- - ---- - ----------------- ----------------- - ---------- - -------- -------- - ----------- - -------- -------- - ------------ - -------- -------- -
// 使用hangar51-loader
import './example.css'
// 为三个 class 设置颜色
document.querySelector('.foo').classList.add('color-red')
document.querySelector('.bar').classList.add('color-blue')
document.querySelector('.baz').classList.add('color-black')在示例中，我们提供了三张不同的图片，并将它们应用于不同的 DOM 元素上。之后我们使用添加 CSS class 的方式来设置图片颜色。
使用hangar51-loader后，在生成的 CSS 文件中，我们将看到类似下面的代码：
-- -------------------- ---- ------- -- -------- -- ----- - ------ ----------------- ------------ -------- -------------- -- ------ ----------------- ------------ -------- -------------- -- ------ ----------------- ------------ -------- -------------- -- - -- -- -- ---- - ----------------- ----------- ------ ----------------- -------- ------------------- -
在这个例子中，我们可以看到三个不同的 CSS 变量：--foo, --bar和--baz。这些变量对应了每个图片的URL，--foo-color, --bar-color 和 --baz-color 变量对应了每个图片的颜色。
最后，我们自定义的 CSS 类（.color-red, .color-blue 和 .color-black）会将颜色信息存储在对应的 CSS 变量中。
总结
以上就是使用 hangar51-loader 的详细教程。使用这个 npm 包可以大大提高网站性能，减少不必要的资源加载。在开发前端应用时，我们可以考虑使用这个工具来优化网站的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005542c81e8991b448d17eb