对 Hexo+Nginx 进行优化

发表于 2018-04-08 更新于 2021-02-03 分类于 Tech Waline：阅读次数：

跑得比 XX 还快

前记

本站的服务器是一个只有 1C 1G 1Mbps 的配置的小辣鸡 ~~谁叫他便宜呢~~

很早之前就对这个方案部署出来的加载速度表示不满了而且也进行了相关的搜索

但是没有发现比较实用的方案

最近进行了一波搜索却发现了挺多有趣的文章所以决心下手了

Hexo 端压缩

所谓 Hexo 端就是未部署到云端前

Hexo 生成的文件

Hexo 通过对Markdown文件根据相应的主题生成出相应的HTML等静态文件

其实 Hexo 生成文件的速度可谓是很快的了那么访问慢的问题出现出哪呢

出现在 Hexo 生成的文件里

Hexo 生成的无论是HTML、CSS还是JS文件都有大段的空白

这使得文件偏大下载和渲染时间偏长

图片文件

这个就不用解释了

这里有两种解决方案可以选

Minifier

在 Hexo 目录下打开终端输入npm install hexo-all-minifier --save

安装完成即可以后每次hexo g就会自动进行优化

gulp

gulp 本质上应该是个自动化流程工具

注：2017/7/17 更新由于 Gulp 的升级 gulp-minify-css 被弃用转 gulp-clean-css gulp 的 task 语法变更

先安装 gulp

1	npm install gulp -g

再在在 Hexo 目录下打开终端安装依赖

1	npm install gulp-clean-css gulp-babel gulp-uglify gulp-htmlmin gulp-htmlclean --save

在 Hexo 目录下新建gulpfile.js文件并粘贴代码

var gulp = require('gulp');
var cleancss = require('gulp-clean-css');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

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

// 压缩 public 目录 html
gulp.task('minify-html', function () {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});

// 压缩 public/js 目录 js
gulp.task('minify-js', function () {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js'));

完成后以后生成完还需要进行压缩再部署

1
2
3

hexo g
gulp
hexo d

我这里没有对图片进行压缩

因为我 Blog 里的图片要么是在放在图床上要么是 Instagram 上的 ~~毕竟小水管撑不起~~

所以我服务器上的图片只有本站首页的个人头像与网站的图标压缩一次就够了

至于怎么压缩后面再说

服务端压缩

开启 Nginx 的 Gzip 功能

只放出代码直接在 Nginx.conf 文件里加入

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types
  application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
gzip_http_version  1.0;
gzip_proxied       any;

设置缓存

这样就不需要每次打开网页都从服务器上下载文件在 server 层级下加入

location ~* ^.+\.(ico|gif|webp|jpeg|webp)$ {
    access_log   off;
    expires      30d;
}

location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
    access_log   off;
    expires      24h;
}

location ~* ^.+\.(html|htm)$ {
    expires      1h;
}

location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {
    access_log   off;
    expires  30d;
}