尝试在博客利用 InstantClick 和 Hexo 的两个插件 hexo-service-worker、hexo-filter-optimize 让博客快如闪电⚡。
注意：最新版本的 NexT 已经集成了 PJAX 的功能，因此对于处理起来比较麻烦的 InstantClick，可不需。另外，Service Worker 请查看我新写的利用 Workbox 实现博客的 PWA。
InstantClick
介绍请看官网，先下载我修改后的 instantclick.js（浏览器右键保存为），再放到 ~/blog/themes/next/source/js/src/ 下，然后添加代码：
1 2 3 4 5 6 | <!-- 文件位置：~/blog/themes/next/layout/_layout.swig --> <script type="text/javascript" src="/js/src/instantclick.js" data-no-instant></script> <script data-no-instant>InstantClick.init();</script> </body> </html> |
|---|
可能会有一些问题，比如与 FancyBox、Google Analytics 等等的兼容问题，解决方法自行查看官网的文档或 Google。
Hexo 插件
先在站点文件夹根目录安装：
1 | ~/blog $ npm install hexo-service-worker hexo-filter-optimize --save |
|---|
然后在站点配置文件中配置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | # 文件位置：~/blog/_config.yml # offline config passed to sw-precache. service_worker: maximumFileSizeToCacheInBytes: 5242880 staticFileGlobs: - public/index.html - public/instantclick.js - public/fonts/chinese-zodiac.woff2 - public/about/index.html - public/life/* - public/tech/* - public/favicon.ico - public/manifest.json stripPrefix: public verbose: false runtimeCaching: - urlPattern: /**/* handler: cacheFirst options: origin: io-oi.me filter_optimize: enable: true # remove static resource query string # - like `?v=1.0.0` remove_query_string: true # remove the surrounding comments in each of the bundled files remove_comments: true css: enable: true # bundle loaded css file into the one bundle: true # use a script block to load css elements dynamically delivery: true # make specific css content inline into the html page # - only support the full path # - default is ['css/main.css'] inlines: excludes: js: # bundle loaded js file into the one bundle: true excludes: # set the priority of this plugin, # lower means it will be executed first, default is 10 priority: 12 |
|---|
1）staticFileGlobs 是首次加载时主动缓存的文件，我给出的只适合我的博客，请自行修改。怎么修改呢？hexo g 之后去 ~/blog/public/ 目录下查看生成的文件，需要主动缓存则加上。
2）origin 修改为你的博客域名，更多说明请查看 GitHub 上的 README。
3）要使用 Service Worker 博客必须 HTTPS。
最后，deploy 到 GitHub 上查看效果，Enjoy it! ☕
