博客加载速度问题

然2020-08-062023-02-11

前天，有一哥们儿跟我说我的博客加载速度超慢。我自己看了一下，好像时确实存在这个问题。这不能赖gitee或者是运营商，得从自身找原因。

图片

首先想到的是图片的大小问题，这跟加载速度有很大关系，越大越慢，越小越快。在之前两篇的博客里，实例图片都用的是原图，也就是上传的gitee仓库里的。当然，这种办法也很重要，这里有必要说明一下。

图片引用的相对路径

首先，在blog目录下找到_config.yml文件，找到以下代码：

  # Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

将其中post_asset_folder后的false改为true，这样以后在创建新文章的时候，hexo就会在blog/source/posts目录下，新建一个与你博客标题同名的文件夹，你就可以把要用的图片放进去。
在编写文章的.md文件时在要插入图片的地方使用以下标签：

1	{% asset_img example.jpg this is an example image %}

其中example.jpg就是图片文件名，当然后缀也可以是.png，然后this is an example image就是图片的描述文字。
但是，这种办法很容易导致图片过大而加载缓慢，建议先将图片压缩后再上传。这里推荐在线压缩。

引用网络图片

这是一种非常简单的办法，而网络上的图标往往都是经过压缩的，省去了很多过程。在需要插入图片的地方使用以下标签：

1	![图片的描述文字](图片的地址)

以上两种方法的图片都经过压缩，原来5MB的图片压缩后只有700KB，能极大加快加载速度。

静态文件的大小

除了图片，网站静态文件也很关键，这里使用gulp插件实现压缩，在``blog`根目录里，安装：

npm install --global gulp-cli
npm install gulp-htmlclean --save-dev
npm install --save gulp-htmlmin
npm install gulp-clean-css --save-dev
npm install --save-dev gulp-uglify
npm install --save-dev gulp-babel @babel/core @babel/preset-env
npm install --save-dev gulp-imagemin

随后，在blog目录里创建一个gulpfile.js文件：

var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var htmlmin = require('gulp-htmlmin')
var htmlclean = require('gulp-htmlclean')
var imagemin = require('gulp-imagemin')
// tester 
// var uglifyjs = require('terser')
// var composer = require('gulp-uglify/composer')
// var pump = require('pump')
// var minify = composer(uglifyjs, console)

// babel 
var uglify = require('gulp-uglify')
var babel = require('gulp-babel')

// minify js - babel
gulp.task('compress', () =>
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify().on('error', function (e) {
      console.log(e)
    }))
    .pipe(gulp.dest('./public'))
)

// minify js - tester 
// gulp.task('compress', function (cb) {
//   var options = {}
//   pump([
//     gulp.src(['./public/**/*.js', '!./public/**/*.min.js']),
//     minify(options),
//     gulp.dest('./public')
//   ],
//   cb
//   )
// })

// css
gulp.task('minify-css', () => {
  return gulp.src('./public/**/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('./public'))
})

// 压缩 public 目录内 html
gulp.task('minify-html', () => {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
      removeComments: true, // 清除 HTML 註释
      collapseWhitespace: true, // 压缩 HTML
      collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input />
      removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: true, // 删除 <script> 的 type="text/javascript"
      removeStyleLinkTypeAttributes: true, // 删除 <style> 和 <link> 的 type="text/css"
      minifyJS: true, // 压缩页面 JS
      minifyCSS: true, // 压缩页面 CSS
      minifyURLs: true
    }))
    .pipe(gulp.dest('./public'))
})

// 压缩 public/uploads 目录内图片
gulp.task('minify-images', async () => {
  gulp.src('./public/img/**/*.*')
    .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/img'))
})

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