目標網站

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和压缩博文的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。