hexo 压缩页面和静态资源文件

时间：

分类：

hexo

字数：

936 字

时长：

大约需要 4 分钟

次数：

0 人阅读

默认安装的 hexo 执行 npm run build 命令不会压缩 HTML JS CSS代码，这对于服务器来说，并不友好，服务器空间占用更多，带宽也占用更多。

如何添加 hexo 代码压缩功能？首先说说现有的压缩插件：

集成插件 hexo-neat

首先时所说集成压缩 HTML JS CSS 为一体的 hexo-neat 插件，该插件有以下几个问题：

  1. 各种打印信息输出一大串，并且还不能去掉打印信息，而且还向编译后的文件加入私有注释 rebuild by neat，不太爽！
  1. npm包 跟 github 包 不统一，github 的 README 有 logger 配置选项，npm 包却没有这配置。
  1. 每次执行 npm run build html 都被重新构建，不能启用 hexo 缓存优化，看不到最新的 html 构建信息。
  1. 包长久不维护。

官方插件

官方插件也有个小问题，想要的效果是 npm run server 不要压缩代码，却也被压缩了

如果能忍受这小问题，可以直接使用，安装方式：

hexo-clean-css
hexo-html-minifier
hexo-uglify

  1. 安装
1
npm i hexo-clean-css hexo-html-minifier hexo-uglify --save
  1. 新增配置 _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
uglify:
  mangle: true
  # 这儿不能为空，为空会导致 js 文件压缩
  # output:
  # compress:
  exclude:
    - '*.min.js'
  es6: false

clean_css:
  exclude: 
    - '*.min.css'

html_minifier:  
  collapseBooleanAttributes: true
  collapseWhitespace: true
  # Ignore '<!-- more -->' https://hexo.io/docs/tag-plugins#Post-Excerpt
  ignoreCustomComments: [ !!js/regexp /^\s*more/]
  removeComments: true
  removeEmptyAttributes: true
  removeScriptTypeAttributes: true
  removeStyleLinkTypeAttributes: true
  minifyJS: true
  minifyCSS: true

注意：hexo-uglify 配置有坑，如果直接复制 github 的示例配置，js文件不会被压缩，参考上述配置的注释。

  1. 清空缓存，重新构建
1
2
npm run clean
npm run build

自己动手，扩展 hexo 功能

根据官方插件源码，新增功能 npm run server 不压缩 HTML JS CSS 文件，由于只是扩展官方插件功能，配置信息与官方插件一样。

  1. 安装依赖
1
npm i micromatch uglify-js terser html-minifier clean-css  --save
  1. 新建 themes/landscape/scripts/compress.js
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
const { isMatch } = require('micromatch');
const uglify = require('uglify-js');
const terser = require('terser');
const minify = require('html-minifier').minify;
const CleanCSS = require('clean-css');

hexo.config.uglify = Object.assign({
  mangle: true,
  output: {},
  compress: {},
  exclude: '*.min.js',
  es6: false
}, hexo.config.uglify);

hexo.config.html_minifier = Object.assign({
  exclude: [],
  collapseBooleanAttributes: true,
  collapseWhitespace: true,
  // Ignore '<!-- more -->' https://hexo.io/docs/tag-plugins#Post-Excerpt
  ignoreCustomComments: [/^\s*more/],
  removeComments: true,
  removeEmptyAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  minifyJS: true,
  minifyCSS: true
}, hexo.config.html_minifier);

hexo.config.clean_css = Object.assign({
  exclude: ['*.min.css']
}, hexo.config.clean_css);

function compressJS(str, data) {
  const options = hexo.config.uglify;

  const { path } = data;
  const { exclude } = options;

  if (path && exclude && exclude.length) {
    if (isMatch(path, exclude, { basename: true })) return str;
  }

  // Remove unsupported options for UglifyJS
  const jsOptions = Object.assign({}, options);
  delete jsOptions.exclude;
  delete jsOptions.es6;

  const { code } = hexo.config.uglify.es6 ? terser.minify(str, jsOptions) : uglify.minify(str, jsOptions);

  return code;
}

function compressHTML (str, data) {
  const options = hexo.config.html_minifier;
  const path = data.path;
  let exclude = options.exclude;

  if (path && exclude && exclude.length) {
    if (isMatch(path, exclude)) return str;
  }

  return minify(str, options);
};

function compressCSS(str, data) {
  const options = hexo.config.clean_css;
  const path = data.path;
  const exclude = options.exclude;

  if (path && exclude && exclude.length) {
    if (isMatch(path, exclude, { basename: true })) return str;
  }

  return new Promise((resolve, reject) => {
    new CleanCSS(options).minify(str, (err, result) => {
      if (err) return reject(err);
      resolve(result.styles);
    });
  });
};

// 如果不是执行的 npm run server 命令，才压缩代码
if (JSON.parse(process.env.npm_config_argv).original[1] !== 'server') {
  hexo.extend.filter.register('after_render:html', compressHTML);
  hexo.extend.filter.register('after_render:css', compressCSS);
  hexo.extend.filter.register('after_render:js', compressJS);
}
  1. 新增配置 _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
uglify:
  mangle: true
  # 这儿不能为空，为空会导致 js 文件压缩
  # output:
  # compress:
  exclude:
    - '*.min.js'
  es6: false

clean_css:
  exclude: 
    - '*.min.css'

html_minifier:  
  collapseBooleanAttributes: true
  collapseWhitespace: true
  # Ignore '<!-- more -->' https://hexo.io/docs/tag-plugins#Post-Excerpt
  ignoreCustomComments: [ !!js/regexp /^\s*more/]
  removeComments: true
  removeEmptyAttributes: true
  removeScriptTypeAttributes: true
  removeStyleLinkTypeAttributes: true
  minifyJS: true
  minifyCSS: true
  1. 重启项目
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-03-05/hexo-compress/

如果您觉得文章不错，可以点击文章中的广告支持一下！