Hexo 优化与加速

由于网站部署在 GitHub Pages，服务器在美国，在国内部分地区访问速度比较慢而且还不是很稳定。在尝试将加载的google字体库切换成烧饼提供的加速站点后，网站响应速度有一定提升。然后就是使用了 InstantClick 和 hexo 的两个插件 hexo-service-worker、 hexo-filter-optimize 来提速，期间也接触了下 PWA，下边将分别介绍。

如果你的域名已备案，可使用国内云服务商提供的 CDN 服务，相关操作可谷歌或百度。

google字体库切换

切换步骤可参考reuixiy大佬的文章：

Google Fonts 已支持思源宋体！

烧饼网站也有相关的替换步骤：

前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务

InstantClick预加载

在访问者单击链接之前，他们将鼠标悬停在该链接上。在这两个事件之间，通常会经过 200 毫秒至 300 毫秒。InstantClick 会利用这段时间来预加载页面，因此单击时该页面已经存在。使用的方法也很简单：

1. 下载 InstantClick，然后保存到 next/source/js/src/ 目录下

  下载地址

2. 在 next/layout/_layout.swig 的中引入

<script type="text/javascript" src="/js/src/instantclick.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

如遇到图标加载不出来（可使用cdn）、与 FancyBox、Google Analytics 等等的兼容问题，可查看官方文档或 Google。

InstantClick 使用的是 pushState + Ajax，即 PJAX。最新版本 NexT 主题已经支持 PJAX，无需使用 InstantClick。

hexo-filter-optimize

有关使用 hexo-filter-optimize 加速的可参考 github 教程。使用者都反映有一定的问题，最后我也弃用了，相关博文：

加速 Hexo 的方法及遇到的问题

Service Worker

hexo-offline 和 hexo-service-worker 插件都能让网站拥有 Service Worker 功能，能够默认的把站点中 public 内的所有静态资源包括 html 文件缓存起来，达到离线访问的效果。在开发过程中，可以通过 localhost 使用 Service Worker，但如果要在网站上部署 Service Worker，则需要在服务器上设置 HTTPS。

Service worker 是除了 PageSpeed，CDN 这些常见的服务器和网络加速之外，通过客户端实现更好访问体验的工具。

Service Worker 的控制从第二次页面访问开始，在首次加载页面时，所有资源都是从网络加载的，Service worker 在首次加载时不会获取控制网络响应，它只会在后续访问页面时起作用。使用其实现加速/离线访问，只需安装以上任意一款插件，我使用的是 hexo-service-worker，安装步骤：

npm i hexo-service-worker --save

在站点配置文件 _config.yml 添加

# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  stripPrefix: public
  verbose: true

完成后，在 Chrome 开发者工具 Application 选项 Service Workers 下，勾选 Offline （或者直接断网）即可进行离线测试。

由于本站加的东西有点花哨，引入的静态文件也比较多，导致在启用 Service Worker 功能后，缓存的资源文件也挺大。虽然实现了离线访问，不过速度还是有点点慢。

对于那种极简网站，离线访问效果特别棒，整个缓存仅几十兆，比如这位大佬：

reuixiy

其他文章可参考：

使用 Service worker 实现加速/离线访问静态网站

PWA

PWA(Progressive Web Apps) 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点：

1. 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现

2. 体验 - 快速响应，并且有平滑的动画响应用户的操作

3. 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

上文已经使用 Service Worker，网站具备了离线访问功能，再结合 PWA，就可以将网站添加至手机主屏或计算机桌面，如图：

或者在 Chrome 网址栏直接点+号按钮：

请求必须都是 HTTPS（可在 Chrome 开发者工具 Security 下查看），否则在这个页面不会显示安装 XXX…

安装后，在 Mac 的 Chrome 应用目录下出现 Leaface.app：

打开的效果如下：

在 windows 桌面是 Chrome 应用目录下一个类似快捷方式的图标。手机 Chrome 中效果如下：

成功添加到手机桌面（右一）：

加载页面（有 APP 的效果~）：

期间如果添加不成功，则需要在手机系统设置里，为 Chrome 开启创建桌面快捷方式的权限

以下方法均可增加 PWA 功能，方法1试了 N 次没成功，然后使用的是方法2。

方法1

1. 在 Hexo 根目录 /source/ 下，新增 manifest.json 文件

{
    "name": "北宸",
    "short_name": "北宸",
    "icons": [
        {
            "src": "/images/beichen.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/images/beichen.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "theme_color": "#2196f3",
    "background_color": "#2196f3",
    "display": "standalone"
}

属性 src 的值可填写 next/source/images/ 下的图片路径。

2. 在 next/layout/_layout.swig 的 head 标签内引入

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

方法2

在使用方法 1 后，Chrome 开发者工具 Application 下的 Manifest 一直显示：

no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

多次 Google 无果，然后就使用了 hexo-pwa ，此插件支持 Service Worker 和 pwa ，所以只需安装此插件即可替代 hexo-offline 和 hexo-service-worker，具体步骤如下：

npm install --save hexo-pwa

再在站点配置文件中增加如下配置：

# https://github.com/lavas-project/hexo-pwa
pwa:
  manifest:
    path: /manifest.json
    body:
      name: 北宸
      short_name: 北宸
      description: Leaf's Blog
      icons:
      - src: /images/beichen.png
        sizes: 192x192
        type: image/png
      - src: /images/beichen.png
        sizes: 512x512
        type: image/png
      start_url: /index.html
      theme_color: '#2196f3'
      background_color: '#2196f3'
      display: standalone
  serviceWorker:
    path: /sw.js
    preload:
      urls:
      - /
      posts: 5
    opts:
      networkTimeoutSeconds: 5
    routes:
    - pattern: !!js/regexp /hm.baidu.com/
      strategy: networkOnly
    - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
      strategy: cacheFirst
    - pattern: !!js/regexp /\//
      strategy: networkFirst
  priority: 5

有关 Web App Manifest，可参考：

The Web App Manifest

也可在如下网站生成 manifest 的配置项

Web App Manifest Generator

到此，PWA 配置完成，enjoy ！