话不多说,直接进入正题:

压缩静态资源

  静态资源,顾名思义,就是不会变化的资源。当然这个不会变化并不是指这个资源永远不会变,而是在网站更新前不会自己发生变动。最常见的静态资源包括但不限于:HTML文件、多媒体文件(图片、影音……)、字体文件、JS/CSS文件……

  我们先说HTML以及JS/CSS文件,这一类由代码构成的文件,在我们进行编写时,为了提高可读性,会插入很多的空格、换行等等字符。这些字符有些看得见有些看不见,其存在与否都不会影响运行结果,但其是确确实实占用着空间的,所以使用工具删掉这些字符就能减小一部分体积。

  对于多媒体文件,大部分多媒体资源都可以被压缩。压缩多多少少会有一部分的失真(有损压缩),不过只要失真程度不影响用户体验,我们也不必计较这些损失。最常见的压缩手段包括但不限于:使用webp格式、降低图片分辨率……

  最后我们来说字体文件,字体文件对于英文网站一般不会有特别严重的负担,但是中文字符数量非常庞大,如果把所有字符都囊括进来,一个字体文件动辄4MB,甚至有些能够超过20MB。如此高昂的空间成本是我们无法接受的,所以一般我们也会对字体文件进行压缩。

  压缩字体文件主要有两种方案,第一种就是从字体文件中提取出常用的文字,第二种就是仅保留我们需要用到文字。这两种方案各有优略,第二种方案的压缩率通常要显著高于第一种,同时也更安全,不会出现有些生僻字我们用到了却给删掉了的情况。但是第二种方案也有一个显著的缺陷,每当我们更新网站内容时,就要生成新的字体文件,这个问题乍一看可能没什么大不了的,但是当我们使用客户端缓存时就需要想办法避免掉缓存的影响。

教程

  接下来就是说明我是用的压缩方案,我是使用gulp来压缩静态资源。注:我并没有通过gulp压缩多媒体资源,多媒体资源我是通过netlify插件和又拍云压缩的,如果你需要压缩多媒体资源,可以自行去网上查找相应的插件。

  首先,我们要安装gulp,在博客根目录打开终端,输入:

1
2
npm install --global gulp-cli
npm install gulp --save

  接下来,我们要安装gulp插件,小伙伴根据自己需要进行安装即可,不需要全部安装:

1
2
3
4
5
6
7
8
9
10
11
12
# 压缩HTML
npm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev

# 压缩CSS
npm install gulp-cssnano --save-dev

# 压缩JS
npm install gulp-terser --save-dev

# 压缩TTF
npm install gulp-fontmin --save-dev

  在根目录创建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
const gulp = require("gulp")
//用到的各个插件
const htmlMin = require('gulp-html-minifier-terser')
const htmlClean = require('gulp-htmlclean')
const terser = require('gulp-terser')
const cssnano = require('gulp-cssnano')
const fontmin = require('gulp-fontmin')

// 压缩js
gulp.task('minify-js', () =>
gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(terser({}))
.pipe(gulp.dest('./public'))
)

//压缩css
gulp.task('minify-css', () =>
gulp.src(['./public/**/*.css'])
.pipe(cssnano({
mergeIdents: false,
reduceIdents: false,
discardUnused: false,
zIndex: false
})).pipe(gulp.dest('./public'))
)

//压缩html
gulp.task('minify-html', () =>
gulp.src('./public/**/*.html')
.pipe(htmlClean())
.pipe(htmlMin({
removeComments: true, //清除html注释
collapseWhitespace: true, //压缩html
collapseInlineTagWhitespace: true,
collapseBooleanAttributes: true,
noNewlinesBeforeTagClose: false,
removeAttributeQuotes: true,
removeRedundantAttributes: 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 //压缩页面URL
}))
.pipe(gulp.dest('./public'))
)

//压缩字体
function minifyFont(text, cb) {
gulp
.src('./public/fonts/*.ttf') //原字体所在目录
.pipe(fontmin({
text: text
}))
.pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
.on('end', cb);
}

gulp.task('minify-ttf', (cb) => {
var buffers = [];
gulp
.src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
.on('data', function (file) {
buffers.push(file.contents);
})
.on('end', function () {
var text = Buffer.concat(buffers).toString('utf-8');
minifyFont(text, cb);
});
});

//压缩
gulp.task("zip", gulp.parallel('minify-js', 'minify-css', 'minify-html', 'minify-ttf'))

  如果有不需要的压缩功能,直接删除对应代码并在zip任务中删除对其的调用即可。

  现在,只要我们在执行hexo g后执行gulp zip即可压缩我们想要压缩的资源了。

  我们列一个表比较一下压缩前后文件大小的区别(这里只列出我使用到的插件):

文件压缩前(KB)压缩后(KB)减少(KB)
index.css228127101
main.js271413
HTML总和41883820368

注意

  • 这里使用gulp压缩TTF的原理是读取所有HTML文件从而得出我们需要的字符集,然后从TTF文件中提取出我们需要的字体,然后输出到指定目录中,所以当没有执行gulp任务的时候,就不会在目录中生成压缩后的文件。该插件在输出字体文件时支持输出:ttfwoffeotsvg四种格式。
  • 使用时务必根据自己的实际情况修改js文件中的目录信息。
  • 插件的压缩参数各位可以自行前往插件官网查看文档并自行修改。

整合CSS

  我们可以通过将CSS整合进一个文件中来提高空间的利用率(原理自行百度“小文件多为什么占用空间大”)同时也能提高插件的压缩率(因为插件压缩的时候只会分析正在压缩的文件,不会分析多个CSS之间的关系)。

  整合CSS有两个方案,一种是手动整合,一种是修改博客主题源代码。

  我们尽量使用第二种方案,这里我只给出butterfly主题对应的方案,其它主题的读者可以自行摸索或者干脆用第一种方案。

  修改:[butterfly]\source\css\index.styl:(注意缩进)

1
2
3
4
5
6
7
8
9
10
11
  // search
if hexo-config('algolia_search.enable')
@import '_search/index'
@import '_search/algolia'

if hexo-config('local_search') && hexo-config('local_search.enable')
@import '_search/index'
@import '_search/local-search'

+ @import '_custom/*.styl'
+ @import '_custom/*.css'

  然后在与该文件同级目录中新建文件夹“_custom”,接下来,我们把我们自己编写的CSS/styl文件全部放到这里就能直接整合进index.css中了。

使用CDN

  相信很多小伙伴为了白嫖静态服务器,都把博客部署在了国外。这样子的话,国内访问的时候难免会遇到访问慢和不稳定的问题。我们可以通过使用CDN来解决这个问题。

  首先,使用CDN的前提是有自己的域名,如果要白嫖国内的CDN的话还需要进行备案。

  一切准备就绪后挑选心仪的CDN供应商即可。

  CDN我使用的是又拍云,想要注册的小伙伴可以通过这个链接注册:https://console.upyun.com/register/?invite=VXYCm8XvV

本地缓存

  另一个简单有效的方案就是配置网站的本地缓存,将网站的一部分静态资源缓存在客户端上。这样客户端在访问网站时,就可以减少一部分网络请求,以此优化用户体验,同时还能减轻服务器负担。

  我是使用的ServiceWorker进行本地缓存控制,想要了解的小伙伴可以看下面这篇博文:


创作不易,扫描下方打赏二维码支持一下吧ヾ(≧▽≦*)o