众所周知,正常情况下的 Hexo 生成的静态页面往往包括大量无用的 HTML、CSS、JS 内容如空格换行,有时,我们可能也希望在保证源代码格式整洁的情况下可以方便的尽可能减少 Hexo 生成的静态页面的文件体积,自动压缩图片,以减小站点整体体积,以提高站点访问速度,减少不必要的浪费,当然,这些工作也不能过度浪费我们的精力,所以,来看看这个 Hexo 插件吧————Hexo-all-minifier
插件简介
如其名,这是一个多合一的 minifier 插件,他可以自动处理 HTML、CSS、JS 和图片文件,缩减它们的体积,甚至还可以试着帮你减少请求数,帮你合并多个 JS 文件
Hexo-all-minifier实际上集成了所有来自 Hexo 官方的 minifier 插件和另外的 imagemin 插件:
- hexo-html-minifier, which is based on HTMLMinifier
- hexo-clean-css, which is based on clean-css
- hexo-uglify, which is based on UglifyJS
- hexo-imagemin, which is based on 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 - 排除特定类型的图像文件,输入值可以是
gif
、jpg
、png
或svg
。默认为null
,不支持通配符
一些细节
在使用 hexo server
时该插件可能会大大降低实时渲染速度,如果搭配 Browsersync 使用会导致一次保存多次刷新,可能需要注意一下
JS concator 的兼容性可能存在问题,使用时可能需要注意一下
别的没了,可以看看原始仓库,就这样,回见~