Hexo实现代码压缩

1. 1. 前言
2. 2. 正文
   1. 2.1. 插件安装
   2. 2.2. 插件配置
   3. 2.3. 插件效果
3. 3. 后记

前言

在使用Hexo建站时，如果使用一些没加源码压缩的主题，检查网页源代码时会发现网页结构比较松散，一些css、js文件也没有压缩。就如下图这样，虽然没啥太大影响吧，但我想着如果能把源码压缩下，在访问速度上也会带来一定程度的提升。

正文

市面上能实现这样功能的hexo插件很多，最开始我尝试的是 hexo-neat，但发现对本地js文件压缩不了，可能是因为有ES6语法的缘故。后来转到hexo-all-minifier这个插件，可以说是完全满足了需求。

插件安装

在命令行输入下面命令，将该插件安装到我们的博客项目中

npm i hexo-all-minifier -S

插件配置

接着，我们打开项目根目录下的**_config.yml**，在最后面插入以下代码：

# 静态资源压缩
html_minifier:
  enable: true
  exclude:

css_minifier:
  enable: true
  exclude:
    - '**/*.min.css' # 已压缩的css跳过

js_minifier:
  enable: true
  mangle: true # 混淆变量名，压缩更强
  compress: true
  exclude:
    - '**/*.min.js' # 跳过已压缩js
    - '**/comment*.js' # 评论插件JS报错就加入排除

# 图片压缩（可选关闭）
image_minifier:
  enable: false

插件效果

之后，不管我们是hexo s来本地预览，还是hexo g生成静态页面，都可以发现我们的html、css、js文件都被进行了压缩，效果可以参考下图：

后记

那么本篇文章就分享到这，欢迎小伙伴们评论区讨论哦。