hexo优化

Others hexo

发布时间 : 2021-02-17 10:55

hexo优化
1. nginx gzip压缩
2. 静态资源压缩

hexo优化

nginx gzip压缩

修改nginx,conf，在http模块中增加gzip配置

#打开gzip压缩
gzip  on;

#最小压缩文件大小
gzip_min_length  1K;

#压缩缓冲区
gzip_buffers     4 8k;

#压缩类型
gzip_types       text/* text/css text/plain application/javascript application/x-javascript application/xml application/json image/jpeg image/gif image/png image/gif application/octet-stream;

#压缩级别 1-9 1最快 9最慢
gzip_comp_level  9;

#压缩通过代理的所有文件
gzip_proxied     any;

#vary header支持
gzip_vary        on;

#压缩版本（默认1.1，前端为squid2.5使用1.0）
gzip_http_version 1.1;

静态资源压缩

hexo有带有一款工具可以进行静态资源的压缩hexo-neat
- hexo-neat使用
  
  在站点根目录安装
```
npm install hexo-neat --save
```
  配置站点_config.yml
```
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'  
```
  hexo-neat将在hexo g的时候自动执行，显示每个文件的压缩率
  
  [注意]：该工具貌似是在hexo生成静态文件之前对source内的文件进行压缩，对于hexo generate之后生成的css文件没有压缩作用

使用gulp工具，这款工具是较为专业的静态文件压缩工具

安装gulp相关依赖

首先将gulp安装到全局中，否则无法使用
```
npm install gulp -g 
```
修改package.json

直接将需要的依赖放在 package.json 的 devDependencies 字段中，好处就是能够保证你安装的版本和我的一样，可以避免因为版本的原因而出现问题
```
"dependencies": {
  "gulp": "^4.0.2",
  "gulp-imagemin": "^6.2.0",
  "gulp-minify-css": "^1.2.4",
  "gulp-minify-html": "^1.0.6",
  "gulp-uglify": "^3.0.2",
}
```
添加完成之后执行 npm install 命令就会自动安装添加的依赖

创建gulpfile.js

在 Hexo 博客的根目录下面，创建一个 gulpfile.js 文件（这个名字不可改，必须是这个名字）

填入如下代码

var gulp = require('gulp');

//Plugins模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var minifyhtml = require('gulp-minify-html');
var imagemin = require('gulp-imagemin')

// 压缩 public 目录 css文件
gulp.task('minify-css', function () {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});

// 压缩 public 目录 html文件
gulp.task('minify-html', function () {
    return gulp.src('./public/**/*.html')
        .pipe(minifyhtml())
        .pipe(gulp.dest('./public'))
});

// 压缩 public/js 目录 js文件
gulp.task('minify-js', function () {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

// 压缩public/posts 目录 图片文件
gulp.task('minify-img', function () {
    return gulp.src('./public/**/*.*')
        .pipe(imagemin(
            [
                imagemin.gifsicle({
                    'optimizationLevel': 3
                }),
                imagemin.jpegtran({
                    'progressive': true
                }),
                imagemin.optipng({
                    'optimizationLevel': 7
                }),
                imagemin.svgo()
            ], {
                'verbose': true
            }))
        .pipe(gulp.dest('./public'))
});

// 分别执行css、heml、js和图片的压缩任务
gulp.task('build', gulp.series('minify-css', 'minify-html', 'minify-js', 'minify-img'));

[注意]：1.以上代码是运行在gulp4环境中的，与gulp3不适用 2.图片压缩速度很慢，若不需要压缩图片，请将第52行的代码中的minify-img 删除，忽略压缩其他文件同理

对代码进行压缩

hexo clean
hexo g
gulp build
hexo d

可以将以上四句命令合为一句，在package.json中加入如下字段

"scripts": {
  "hexo": "hexo clean && hexo g && gulp build && hexo d"
 }

这样，只需要执行npm run hexo即可

转载请注明来源