Hexo站点优化-压缩站点内容体积

众所周知,正常情况下的 Hexo 生成的静态页面往往包括大量无用的 HTML、CSS、JS 内容如空格换行,有时,我们可能也希望在保证源代码格式整洁的情况下可以方便的尽可能减少 Hexo 生成的静态页面的文件体积,自动压缩图片,以减小站点整体体积,以提高站点访问速度,减少不必要的浪费,当然,这些工作也不能过度浪费我们的精力,所以,来看看这个 Hexo 插件吧————Hexo-all-minifier

插件简介

如其名,这是一个多合一的 minifier 插件,他可以自动处理 HTML、CSS、JS 和图片文件,缩减它们的体积,甚至还可以试着帮你减少请求数,帮你合并多个 JS 文件

Hexo-all-minifier实际上集成了所有来自 Hexo 官方的 minifier 插件和另外的 imagemin 插件:

但装一个总比装四个方便是吧(

插件安装

很简单:

npm install hexo-all-minifier --save
#or
yarn add hexo-all-minifier

MacOS 用户可能还需另外安装一些依赖包:

$ brew install libtool automake autoconf nasm

基本使用

也很简单——将以下内容加入到 Hexo 站点配置文件中即可

all_minifier: true

进阶

js_concator:
  enable: false
  bundle_path: "/js/bundle.js"
  front: false
  silent: false
  • enable - 开启 JS concator, 默认为 false
  • bundle_path - JS 捆绑包的输出路径, 为相对于站点根目录的绝对路径
  • front - 将捆绑脚本放在 body 标签中所有脚本之前。默认为 false
  • silent - 禁止输出优化日志,默认为false

JS concator 会将所有本地脚本连接成一个捆绑脚本,并将其附加到 html 的 “body”标签末尾。
未来版本将允许更多细节控制。


html_minifier:
  enable: true
  ignore_error: false
  silent: false
  exclude:
  • enable - 开启 HTML minifier,默认为true
  • ignore_error - 忽略解析 html 时出现的错误
  • silent - 禁止输出优化日志,默认为false
  • exclude - 排除列表,支持通配符

css_minifier:
  enable: true
  silent: false
  exclude:
    - "*.min.css"
  • enable - 开启 CSS minifier,默认为 true
  • silent - 禁止输出优化日志,默认为false
  • exclude - 排除列表,支持通配符

js_minifier:
  enable: true
  mangle: true
  silent: false
  output:
  compress:
  exclude:
    - "*.min.js"
  • enable - 开启 JS minifier,默认为 true.
  • mangle: Mangle 文件名
  • output: 输出选项,如果其为空,请将其从配置文件中移除,否则其将被设为 null 而不是默认值 undefined.
  • compress: 压缩选项如果其为空,请将其从配置文件中移除,否则其将被设为 null 而不是默认值 undefined.
  • silent - 禁止输出优化日志,默认为false
  • exclude- 排除列表,支持通配符

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false
  silent: false
  • enable - 启用 image minifier,默认值为 true.
  • interlaced - 逐行渲染隔行扫描的 gif,默认值为 false.
  • multipass - 迭代优化 svg,默认值为false.
  • optimizationLevel - 优化等级 ∈[0, 7],默认值为 2.
  • pngquant - 启用 imagemin-pngquant 插件,默认值为 false.
  • progressive - 无损转换为逐行,默认为 false.
  • silent - 禁止输出优化日志,默认为false
  • exclude - 排除特定类型的图像文件,输入值可以是 gifjpgpngsvg。默认为null,不支持通配符

一些细节

在使用 hexo server 时该插件可能会大大降低实时渲染速度,如果搭配 Browsersync 使用会导致一次保存多次刷新,可能需要注意一下

JS concator 的兼容性可能存在问题,使用时可能需要注意一下

别的没了,可以看看原始仓库,就这样,回见~

感谢看到这里噢~ 希望这能给你带来帮助,如果觉得在任何地方有疑问,欢迎联系MWX(如需转载,请注明文章出处噢)!
或者如果大人愿意也可以...
上一篇
下一篇