hexo-offline-popup（提升hexo框架博客访问速度）

采用hexo+github的方式搭建博客的，访问速度是比较慢的。部署后访问有些甚至要加载十几秒，这对用户来说，是非常伤脑筋的，因为托管网站github是外网，所以访问慢是必然的。怎样解决这个问题，提升我们的访问速度呢?

最近在GitHub上发现一个名为hexo-offline-popup的插件，可以加快hexo的加载速度，解决这种问题。

官方介绍

hexo-offline-popup 是一个 hexo 插件，它可加速您的Hexo网站的加载速度，以及网站内容更新弹窗提示。

该插件基于停止维护已久的hexo-service-worker插件，并在它的基础上加以改进。

下载安装

在hexo的根目录下打开git bash输入如下指令下载安装

npm i hexo-offline-popup --save

如果npm i hexo-offline-popup –save命令执行得很慢，可能是由于网络连接较慢或npm仓库的响应时间较长导致的。您可以尝试以下方法来加快安装速度：

使用淘宝镜像源：淘宝镜像源是一个国内的npm镜像源，可以加速npm包的下载。您可以使用以下命令将npm的镜像源设置为淘宝镜像：

npm config set registry https://registry.npm.taobao.org/

然后再次运行安装命令：

npm i hexo-offline-popup --save

安装后, 运行 hexo clean && hexo generate 激活插件.

配置

如果网站提供的所有内容来自原始服务器，你不需要添加任何配置。只需安装和运行 hexo clean && hexo generate。

在博客根目录的 _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

如果你有CDN资源，例：

https://cdn.some.com/some/path/some-script.js

http://cdn.some-else.org/some/path/deeply/some-style.css

将此配置添加到根目录的 _config.yml

service_worker:
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.some.com
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.some-else.org