hexo 博客支持PWA和压缩博文

PWA

1
yarn add hexo-offline

然后在root config.yml里新增

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# offline config passed to sw-precache.
service_worker:
maximumFileSizeToCacheInBytes: 5242880
staticFileGlobs:
- /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
- /lib/**/*.js
- /lib/**/*.css
- /images/*
- /js/src/**/*.js
stripPrefix: public
verbose: true
runtimeCaching:
- urlPattern: /*
handler: cacheFirst
options:
origin: cdn.bootcss.com

然后添加manifest.json, 比如我使用了 hexo-theme-next的主题,在layout/_custom/header.swig 中引用了manifest.json

1
2

<link rel="manifest" href="/manifest.json">

manifest生成地址: https://app-manifest.firebaseapp.com/

比如,我的为

1
2
3
4
5
6
7
8
9
{
"name": "风 - Ryan Miao",
"short_name": "风",
"theme_color": "#2196f3",
"background_color": "#2196f3",
"display": "browser",
"scope": "/",
"start_url": "/"
}

具体缓存策略还是看下官方文档,这里不求甚解缓存。重启博客,打开控制台,查看网络,会发现,所有的文件都是(from ServiceWorker) 或者(from disk cache)或者(from memory cache)

当hexo g之后,会多出一个service-worker.js里面则是会缓存的内容。

对了,何时会刷新呢,毕竟都给缓存了。规范规定了强制刷新不给缓存,so,还有可以ctrl+f5,以及在chrome控制台上设置application的service worker属性。

压缩

看了下计算,压缩大概可以节省一半空间。

1
2
3
4
5
6
7
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

或者使用yarn

yarn global add gulp
yarn add gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp

然后,在根目录新增 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

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');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.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')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

运行:

1
hexo clean && hexo g && gulp &&  hexo s

参考

https://blog.naaln.com/2017/09/hexo-with-pwa/

Ryan Miao wechat
关注我的公众账号,接收最新文章
Donate
0%