返回博客

Hexo Next 主题优化:使用 hexo-all-minifier 插件压缩代码

本文介绍如何使用 hexo-all-minifier 插件优化 Hexo Next 主题,解决旧版 uglify 不支持 ES6 导致 JS 压缩失败的问题,并提供详细的插件配置说明。文章涵盖了 hexo-all-minifier 的安装、配置以及各个配置选项的详细解释,帮助用户有效提升 Hexo 博客的性能。

Mt.r
|

今天我对 Hexo 进行了一些优化,需要进行代码压缩。在网上找了很多的教程,大多数都使用 gulp 这个插件进行代码压缩,但我不建议大家使用。 因为我使用的过程中发现这个可能无法压缩部分 JS。导致出错,原因是较旧的 uglify 不支持 ES6。 所以我个人建议大家使用 hexo-all-minifier

hexo-all-minifier 介绍

hexo-all-minifier 项目地址:在 Github 查看 hexo-all-minifier 项目 引用一下官方说明:

Integrate all the official minifier plugins of HEXO and a imagemin plugin: 译:本插件集成了 Hexo 官方 minifier 插件和 imagemin 插件:

hexo-all-minifier 安装

在 hexo 目录中运行下面的命令

npm install hexo-all-minifier --save

在 hexo 配置文件中插入下面的代码

all_minifier: true

执行代码刷新,查看效果

hexo g
hexo d

hexo-all-minifier 配置

其实这个官方有详细的说明,我先贴一下,后面有时间的话进行翻译 :star2::new:!NEW

js_concator:
  enable: false
  bundle_path: "/js/bundle.js"
  front: false
  • enable - Enable the Js concator. Defaults to false.
  • bundle_path - The output path of the bundle script. It will be set as absolute path to the root dir.
  • front - Put the bundle script in the front of all scripts in body tag. Default to false, which means the bundle script will be placed in the back of other scripts.

The concator will concat all local scripts into one bundle script and attach it to the end of html’s body tag. More detail control will be allowed in the future version.


html_minifier:
  enable: true
  ignore_error: false
  exclude:
  • enable - Enable the HTML minifier. Defaults to true.
  • ignore_error - Ignore the error occurred on parsing html.
  • exclude - Exclude files. Glob is support.

css_minifier:
  enable: true
  exclude:
    - "*.min.css"
  • enable - Enable the CSS minifier. Defaults to true.
  • exclude - Exclude files. Glob is support.

js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - "*.min.js"
  • enable - Enable the JS minifier. Defaults to true.
  • mangle: Mangle file names
  • output: Output options. If it is empty, please remove it from the .yml file! Otherwise it will be set to null, which is different from undefined.
  • compress: Compress options. If it is empty, please remove it from the .yml file! Otherwise it will be set to null, which is different from undefined.
  • exclude: Exclude files. Glob is support.

image_minifier:
  enable: true
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false
  • enable - Enable the image minifier. Defaults to true.
  • interlaced - Interlace gif for progressive rendering. Defaults to false.
  • multipass - Optimize svg multiple times until it’s fully optimized. Defaults to false.
  • optimizationLevel - Select an optimization level between 0 and 7. Defaults to 2.
  • pngquant - Enable imagemin-pngquant plugin. Defaults to false.
  • progressive - Lossless conversion to progressive. Defaults to false.
  • exclude - Exclude specific types of image files, the input value could be gif,jpg, png, or svg. Default to null. Glob is not support.