npm 包 @geoshar/base64-inline-loader 使用教程

什么是 @geoshar/base64-inline-loader

@geoshar/base64-inline-loader 是一个 webpack loader，可以将指定的图片文件转换为 base64 编码的字符串，并直接内联到 CSS、HTML 或 JavaScript 文件中使用。

相比于将图片文件以 URL 资源的形式加载，使用 base64 内联可以减少 HTTP 请求，并且可以避免跨域问题。但是，由于 base64 编码后的字符串较长，文件大小也会随之增加，因此需要根据实际情况进行权衡和选择。

安装和使用

@geoshar/base64-inline-loader 可以通过 npm 包管理工具进行安装：

npm install --save-dev @geoshar/base64-inline-loader

使用时需要在 webpack 配置中将其作为某个规则的 loader 进行配置，例如：

-- -------------------- ---- -------
-------------- - -
  ------- -
    ------ -
      -
        ----- --------------------------
        ---- -
          -
            ------- --------------------------------
            -------- -
              ------ ----
            -
          -
        -
      -
    -
  -
-

这样，当遇到以 .png、.jpeg、.jpg、.gif 或 .webp 结尾的文件时，就会自动使用 @geoshar/base64-inline-loader 进行转换。

其中，options 中可以指定 limit 参数，用于控制文件大小（单位为 byte），超过 limit 大小的文件将不会进行转换，而是被当做普通的 URL 资源处理。通常情况下，limit 的值应该根据实际情况进行调整，以权衡文件大小和请求次数之间的关系。

使用示例

在 CSS 文件中使用内联图片

.logo {
  background-image: url('./logo.png');
  width: 100px;
  height: 50px;
}

将上述代码修改为：

.logo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAA...)
  width: 100px;
  height: 50px;
}

在 HTML 文件中使用内联图片

<img src="./banner.png" alt="banner" width="600" height="300">

将上述代码修改为：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACoCAMAAABt9SM9AAAARVBMVEWAgICAgICAgICAgICA...)

在 JavaScript 文件中使用内联图片

import logo from './logo.png';

const img = new Image();
img.src = logo;
document.body.appendChild(img);

将上述代码修改为：

import logoBase64 from './logo.png';

const img = new Image();
img.src = logoBase64;
document.body.appendChild(img);

总结

通过使用 @geoshar/base64-inline-loader，可以将图片文件进行 base64 内联，从而减少 HTTP 请求并解决跨域问题。使用时需要根据实际情况进行参数配置和权衡，避免文件大小过大而影响性能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc581e8991b448e6462