使用 hexo-simple-minify 压缩博客的静态资源

发表于 分类于 阅读次数： Artalk：

介绍一个简单的 hexo 插件 hexo-simple-minify，该插件能够压缩 hexo 博客的 html、css、js 文件。

前言

在用 Chrome Devtools 测试网站性能时，我发现我的 blog 的静态资源并没有被压缩。为了加快博客的访问速度，我尝试寻找一个压缩静态文件的方法。next 主题的 config.yml 虽然有 minify 选项，但开启这个选项后只会在生成时删除没有用到的 js 和 css 文件，并不会压缩静态资源。又看了看其他插件。

现有压缩插件

  • hexo-all-minifier 太长时间没维护，不太容易配置。
  • hexo-minify 配置相对容易。不过多了不需要的图片压缩功能，依赖的软件包太多，安装时还会编译失败。

自己动手，丰衣足食

我基于 hexo-minify 创建了 hexo-simple-minify 删去了图片压缩功能。

使用方法

在 hexo 博客的根目录下运行以下命令安装该插件

1
2
3
4
5
6
7
# Use npm
npm install hexo-simple-minify --save
# Use pnpm
pnpm install hexo-simple-minify --save
# Use yarn
yarn add hexo-simple-minify

在根目录下的_config.yml文件中添加以下信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
## Hexo-minify Default Config Options
minify:
  preview: false ## 本地预览时是否压缩
  exclude: ["*.min.*"]
  js:
    enable: true
    sourceMap:
      enable: false ## 生成 sourceMap
      ## 将 sourceMappingURL 插入压缩后的 js 文件，如果为 false 则需要在浏览器开发者工具中手动添加 sourceMap
      sourceMappingURL: false ## //# sourceMappingURL=xxx.js.map
    ## 详细配置: https://github.com/terser/terser#minify-options
    options: {}
  css:
    enable: true
    ## 详细配置: https://github.com/clean-css/clean-css#compatibility-modes
    options: {}
  html:
    enable: true
    ## 详细配置: https://github.com/kangax/html-minifier#options-quick-reference
    options:
      minifyJS: true # Compressed JavaScript
      minifyCSS: true # CSS Compressed
      removeComments: true # Remove the comments
      collapseWhitespace: true # Delete any extra space
      removeAttributeQuotes: true # Delete attribute quotes
  font:
    enable: false
    ## 详细配置: https://github.com/Lete114/fontmin-spider#api
    options: {}

总结

通过开发 hexo-simple-minify 插件，我解决了自己博客的静态资源压缩问题，也希望能够为其他 Hexo 博主提供一个简单的方案。话说回来，这貌似是我 5 年前注册 GitHub 以来第一个比较正经的项目，虽然功能简单，但我相信它能够帮助到需要压缩静态资源的博客作者。如果你有任何建议或改进意见，欢迎在 issue 中提出。开源的力量在于社区的共同努力，期待能够不断优化和完善这个项目。感谢阅读，祝你们的博客运行更加流畅！