SelfBlogForWyx

0%

尝试解决HEXO加载过慢的问题（采坑无数）

发表于 更新于 分类于
本文字数： 7.6k 阅读时长 ≈ 7 分钟

前言

尝试解决HEXO加载过慢的问题（采坑无数），整的脑壳痛

项目背景

HEXO部署在github，由于github是国外的网站，所以加载速度很慢，尤其体现在加载图片过慢。

关键技术

hexo gulp

基本思路

一、尝试双线程加载。使用coding或gitee双线程加载

二、利用gulp压缩文件，提高加载效率

问题解决

尝试一：双线程加载。使用coding或gitee双线程加载

先说结果吧，这种方法行不通。下面说一下部署的过程。

coding生成仓库，部署ssh，都没啥没问题，但是在生成pages时候出现很大问题。

首先，coding被腾讯云收购，原本生成pages的选项在“持续部署”下面，现在，居然放到了腾讯云里面。

而且还是收费的？？？？

收费也可以啊，后续在进行部署的时候，Jenkinsfile代码编译一直过不去

我也是醉了，，，，

coding被改什么什么鬼样子了

不愧是鹅厂

后面尝试gitee+github双线程加载

部署成功后，依然很慢

果断放弃双线程

尝试二：利用gulp压缩资源文件，提高加载速度

这里也采坑无数，真的是脑壳痛~

原理

gulp工具通过压缩public文件中的html、css、js、image等静态资源，通过压缩这些静态资源，可以减少请求的数据量从而达到优化博客访问速度的目的。

流程（建议看完所有的内容再操作，可以避免很多坑）

安装gulp

cmd运行以下命令：

1
2
3
npm install gulp -g
# 查看版本
gulp -v

注意，cmd要管理员运行，不然会被拒绝访问

在站点根目录下安装：

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install gulp --save
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
# 解决【Gulp打包问题】 GulpUglifyError: unable to minify JavaScript
# 解决 gulp-uglify 压缩JavaScript 不兼容 es5 语法的问题
npm install babel-core@6.26.3 --save
npm install gulp-babel@7.0.1 --save
npm install babel-preset-es2015@6.24.1 --save
# gulp-babel 取消严格模式方法("use strict")
npm install babel-plugin-transform-remove-strict-mode --save

在 Hexo 站点根目录下新建gulpfile.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
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var babel = require('gulp-babel');

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

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

// 压缩js文件
gulp.task('minify-js', function (done) {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
        .pipe(babel({
            //将ES6代码转译为可执行的JS代码
            presets: ['es2015'] // es5检查机制
        }))
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
    done();
});

// 压缩 public/images 目录内图片(Version<3)
// gulp.task('minify-images', function () {
//     gulp.src('./public/images/**/*.*')
//         .pipe(imagemin({
//             optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
//             progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
//             interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
//             multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化
//         }))
//         .pipe(gulp.dest('./public/images'));
// });

// 压缩 public/images 目录内图片(Version>3)
gulp.task('minify-images', function (done) {
    gulp.src('./public/images/**/*.*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/images'));
    done();
});

//4.0以前的写法 
//gulp.task('default', [
//  'minify-html', 'minify-css', 'minify-js', 'minify-images'
//]);
//4.0以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.series(gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-images')), function () {
    console.log("----------gulp Finished----------");
    // Do something after a, b, and c are finished.
});

同在根目录，创建.babelrc文件

1
2
3
4
{
    'presets': ['es2015'],
    "plugins": ["transform-remove-strict-mode"]
}

最后，原来的三部曲变成：

1
2
3
4
hexo clean
hexo g
gulp
hexo d

采坑

①gulp-imagemin 报错

1
2
3
4
5
6
7
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\Blog\node_modules\gulp-imagemin\index.js from D:\Blog\gulpfile.js not supported.

Instead change the require of index.js in D:\Blog\gulpfile.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (D:\Blog\gulpfile.js:11:16)
    at async Promise.all (index 0) {
  code: 'ERR_REQUIRE_ESM'
}

一开始以为是gulpfile.js中语法错误，尝试了如下方法：

STEP1: 将gulpfile.js改为gulpfile.mjs，在package.json中加入"type": "module"，这样可以让gulpfile按ES6的语法解析。

STEP2: 将gulpfile中所有的的require按ES6语法替换为import，如将const gulp = require('gulp')，替换为import gulp from 'gulp'。

但是，还是不行！报错：imagemin.jpegtran is not a function

后来，我重新看一下报错，只有这个gulp-imagemin出问题了，其他的没有出问题。说明不是语法的问题。

然后将刚才的修改回溯了

尝试后，发现是gulp-imagemin版本太高的原因。

尝试降低版本

1
npm i -D gulp-imagemin@xxx

还是报错~

后来发现，是因为我用的npm，npm确实会有这个问题（具体原因，我也不知道），换成cnpm就好了

1
2
3
4
#安装cnpm（淘宝镜像）
npm install -g cnpm --registry=https://registry.npm.taobao.org
#要在站点根目录下安装
cnpm install gulp-imagemin --save-dev

②gulp报错Did you forget to signal async completion?

1
2
[23:22:51] The following tasks did not complete: default, <parallel>, minify-js
[23:22:51] Did you forget to signal async completion?

翻译一下：

1
2
[23:22:51] 以下任务没有完成: default, <parallel>, minify-js
[23:22:51] 你是否忘记发送异步完成信号?

网上大多数给出的都是用async 和 await，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 引用gulp模块
const gulp = require('gulp');

// 执行的是下面的代码，而不是整个文件
// 使用gulp.task 建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp('first',async() => {
    console.log("人生中的第一个gulp任务执行完毕");
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    // 通过pipe方法处理base.css文件
    // pipe方法里面写的是 如何处理代码  
        .pipe(gulp.dest('dist/css'));  // 把base.css复制到dist/css文件夹中
});

改成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 引用gulp模块
const gulp = require('gulp');

// 执行的是下面的代码，而不是整个文件
// 使用gulp.task 建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',async() => {
    await console.log("人生中的第一个gulp任务执行完毕");
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    // 通过pipe方法处理base.css文件
    // pipe方法里面写的是 如何处理代码  
        .pipe(gulp.dest('dist/css'));  // 把base.css复制到dist/css文件夹中
});

但是没用啊！

尝试各种改法无果后，索性把gulpfile.js代码中的done、async 和 await都去掉了，，，，，，然后就成功了~

如下：

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
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

// 压缩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'))
});
// 压缩css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});
// 默认任务【gulp4写法】
gulp.task('default',gulp.parallel( 'minify-html','minify-css','minify-js'));

成果

虽然没有CDN加速和双线程加载，只用gulp压缩了资源文件，加载速度还是有显著提升的！

待改进

后续尝试取消google字体加载，进一步加快加载速度

-------------本文结束感谢您的阅读-------------
原创技术分享，您的支持将鼓励我继续创作

欢迎关注我的其它发布渠道