目標(biāo)網(wǎng)站

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": "風(fēng) - Ryan Miao","short_name": "風(fēng)","theme_color": "#2196f3","background_color": "#2196f3","display": "browser","scope": "/","start_url": "/"}

具體緩存策略還是看下官方文檔，這里不求甚解緩存。重啟博客，打開控制臺(tái)，查看網(wǎng)絡(luò)，會(huì)發(fā)現(xiàn)，所有的文件都是(from ServiceWorker) 或者(from disk cache)或者(from memory cache)。

當(dāng)hexo g之后，會(huì)多出一個(gè)service-worker.js里面則是會(huì)緩存的內(nèi)容。

壓縮

看了下計(jì)算，壓縮大概可以節(jié)省一半空間。

$ 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')); }); // 執(zhí)行 gulp 命令時(shí)執(zhí)行的任務(wù) gulp.task('default', ['minify-html','minify-css','minify-js' ]);

運(yùn)行：

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

參考

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

唯有不斷學(xué)習(xí)方能改變！ -- Ryan Miao

總結(jié)

以上是生活随笔為你收集整理的hexo 博客支持PWA和压缩博文的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。