概述

这两天给博客添加了很多功能，各种动画效果都用上了，但是发现访问速度却很慢┭┮﹏┭┮…特别是手机访问，所以就搜索了一下提高访问速度的方式，发现了这个网站,这时一个很好的网页性能分析工具，可以根据它的分析结果针对性的对网页进行优化。

下面是我一开始测试的结果：

可以看到此时我的网站在Mobile上访问的性能很差，只获得了27分，优化前可以看到Eliminate render-blocking resources，即有一些加载很慢的资源阻碍了网站的渲染。

具体步骤

关闭动态效果

可以减少动画在Mobile上的优化效果来提升速度。

打开Next的主题配置文件，找到motion

# Use velocity to animate everything.
# For more information: http://velocityjs.org
motion:
  enable: false
  async: false

将enable改为false

再来看看效果

可以看到，现在就有了51的分了

去掉页脚的icon动态效果

打开Next的主题配置文件，找到footer

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

实现博客压缩

项目压缩就是对html、css、js、images进行优化，即把重复的代码合并，把多余的空格去掉，用算法把 images 进行压缩。压缩后的博客，加载速度会有较大的提升

我们首先需要全局安装 gulp-cli，然后在博客工作目录下安装需要的插件：

1 2	npm install --global gulp-cli npm install gulp gulp-clean-css gulp-uglify-es gulp-html-minifier-terser

安装完成后在博客工作目录下新建文件 gulpfile.js ，写入如下 gulp 任务配置代码

const gulp = require('gulp');
const cleancss = require('gulp-clean-css');
const uglify = require('gulp-uglify-es').default;
const htmlmin = require('gulp-html-minifier-terser');


// 压缩public目录下的css文件
// 可接受参数的文档：https://github.com/jakubpawlowicz/clean-css#constructor-options
gulp.task('minify-css', () => {
    return gulp.src('./public/**/*.css')           // 处理public目录下所有的css文件，下同
        .pipe(cleancss({ compatibility: 'ie8' }))  // 兼容到IE8
        .pipe(gulp.dest('./public'));
});

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

// 压缩public目录下的html文件
// 可接受参数的文档：https://github.com/terser/html-minifier-terser#options-quick-reference
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlmin({
            removeComments: true,                 // 移除注释
            removeEmptyAttributes: true,          // 移除值为空的参数
            removeRedundantAttributes: true,      // 移除值跟默认值匹配的属性
            collapseBooleanAttributes: true,      // 省略布尔属性的值
            collapseWhitespace: true,             // 移除空格和空行
            minifyCSS: true,                      // 压缩HTML中的CSS
            minifyJS: true,                       // 压缩HTML中的JS
            minifyURLs: true                      // 压缩HTML中的链接
        }))
        .pipe(gulp.dest('./public'))
});

// 默认任务，不带任务名运行gulp时执行的任务
gulp.task('default', gulp.parallel(
    'minify-css', 'minify-js', 'minify-html'
));

之后先hexo g生成，然后再执行glup就可以对public 目录下的文件进行压缩优化处理了。