hexo 博客支持PWA和压缩博文

目标网站

https://blog.rmiao.top/

PWA

yarn add hexo-offline

然后在root config.yml里新增

# offline config passed to sw-precache. service_worker:maximumFileSizeToCacheInBytes: 5242880staticFileGlobs:- /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}- /lib/**/*.js - /lib/**/*.css- /images/*- /js/src/**/*.jsstripPrefix: publicverbose: trueruntimeCaching:- urlPattern: /* handler: cacheFirst options: origin: cdn.bootcss.com

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

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

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

比如，我的为

{"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里面则是会缓存的内容。

压缩

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

$ 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 :

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' ]);

运行：

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

参考

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

唯有不断学习方能改变！ -- Ryan Miao

总结

以上是生活随笔为你收集整理的hexo 博客支持PWA和压缩博文的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。