目标网站
- https://blog.rmiao.top/
- PWA
- yarn add hexo - offline
然后在 root config.yml 里新增
- # 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
<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/
来源: https://www.cnblogs.com/woshimrf/p/hexp-pwa-compress.html