npm 包 hexo-filter-inline-assets 使用教程-JavaScript中文网-JavaScript教程资源分享门户

Hexo 是一款静态博客框架，它的主要特点是使用 Markdown 编写，简洁而美观。然而，在我们使用 Hexo 构建博客时，可能会遇到一些图片、样式等资源的加载问题。如果直接将这些资源链接到云端，那么会导致博客打开速度变慢；如果将这些资源放在本地，又会增加文件大小、加载时间等问题。那么，在这种情况下，我们可以使用 npm 包 hexo-filter-inline-assets 来帮助我们解决这个问题。

hexo-filter-inline-assets 是什么？

hexo-filter-inline-assets 是一个 Hexo 插件，它可以将本地的图片、样式等静态资源转换成 base64 编码，并嵌入到输出的 HTML 文件中，这样就可以减少 HTTP 请求，进而加快网页加载速度。同时，它还支持压缩 SVG、CSS 和 JavaScript 文件，使得页面大小更小，提高用户体验。

hexo-filter-inline-assets 的安装

安装 hexo-filter-inline-assets 很简单，只需要在 Hexo 根目录下执行以下指令即可：

npm install hexo-filter-inline-assets --save

值得注意的是，由于该插件依赖于 html-minifier 包，所以我们需要先安装该包：

npm install html-minifier --save

hexo-filter-inline-assets 的配置

在安装好 hexo-filter-inline-assets 后，接下来我们需要对其进行配置。具体来说，我们需要编辑 Hexo 的 _config.yml 配置文件，添加以下内容：

inline_assets:
  images: false（可选）
  scripts: true（可选）
  styles: true（可选）
  svg: true（可选）
  maxSize: -1（可选）
  minify: false（可选）
  debug: false（可选）

上面的配置项解释如下：

images：是否内联图片，默认为 false。如果为 true，则该插件会将你博客中使用的图片转换成 base64，并嵌入到输出的 HTML 中。
scripts：是否内联 JavaScript，默认为 true。如果为 true，则该插件会将你博客中使用的 JavaScript 文件转换成 base64，并嵌入到输出的 HTML 中。
styles：是否内联样式，默认为 true。如果为 true，则该插件会将你博客中使用的 CSS 文件转换成 base64，并嵌入到输出的 HTML 中。
svg：是否内联 SVG，默认为 true。如果为 true，则该插件会将你博客中使用的 SVG 文件转换成 base64，并嵌入到输出的 HTML 中。
maxSize：设置内联文件的最大大小，默认为 -1，表示不限制大小。如果设置了值，那么超过该值的文件将不会被内联。
minify：是否启用 CSS、JavaScript 和 HTML 的压缩，默认为 false。如果为 true，则该插件会压缩这些文件并将它们嵌入到输出的 HTML 文件中。
debug：是否启用调试模式，默认为 false。如果为 true，则该插件会输出更多的调试信息。

hexo-filter-inline-assets 的使用

在进行了上述配置后，我们就可以使用 hexo-filter-inline-assets 插件了。

首先，在创建 Hexo 博客时，如果要使用本地图片，我们需要将图片放入指定的文件夹中，例如：

/source/images

然后，在 Markdown 文件中引用该图片时，我们需要在文件名前加上 /assets/img，例如：

![图片名称](/assets/img/image.jpg)

接着，在 Hexo 根目录下执行以下命令：

hexo clean && hexo g

执行完毕后，该插件会将图片转换成 base64，并嵌入到输出的 HTML 文件中。

同样的，如果要使用本地的 CSS 文件，我们需要在 /source/css 文件夹中创建 CSS 文件，并在 Markdown 文件中引用该文件，例如：

<link rel="stylesheet" href="/assets/css/style.css">

相应地，在 Hexo 根目录下执行以下命令：

hexo clean && hexo g

该插件会将 CSS 文件嵌入到输出的 HTML 文件中。

结束语

到了这里，我们已经学会了如何使用 hexo-filter-inline-assets 插件来优化博客的加载速度。该插件不仅可以将图片、CSS 等文件转换成 base64，还支持对文件进行压缩，可以说是非常实用的一个 npm 包。

当然，除了 hexo-filter-inline-assets，还有很多其他的 Hexo 插件可以帮助我们解决类似的问题，我们可以根据实际需求选择适合的插件。

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