问题

搭建gitbook后,本地访问好好的。但是一放到coding上,图标一直在转圈圈,要很多秒才能加载出来。网上也没找到原因,但是这个问题不止存在我一个人上。我试验了几个gitbook站点,有几个问题和我一样。

追踪

按f12打开开发者工具,切换到network,之后再刷新网页

Gitbook站点图标需要很久才能显示出来 的解决方法

这就找到原因了。原来 livereload.js 就是罪魁祸首,整整加载了20秒!

细究

点击查看代码

Gitbook站点图标需要很久才能显示出来 的解决方法

(function() {
  var newEl = document.createElement('script'),
      firstScriptTag = document.getElementsByTagName('script')[0];

  if (firstScriptTag) {
    newEl.async = 1;
    newEl.src = '//' + window.location.hostname + ':35729/livereload.js';
    firstScriptTag.parentNode.insertBefore(newEl, firstScriptTag);
  }

})();

上面代码就是plugin.js这个文件内容,可以看到这么一行

newEl.src = '//' + window.location.hostname + ':35729/livereload.js';

这个文件访问了 站点名:35729/livereload.js 而网站基本上默认只有80端口,这个35729端口是livereload要用的端口。所以就导致了20秒的延迟。

解决

livereload是gitbook自带的插件,但是可以禁用它
查看你的gitbook目录有没有book.json文件,如果没有就新建一个,写入下面内容

{
    "plugins": [
        "-livereload"
    ]
}

如果已存在,在合适的位置添加下面内容

"plugins": [
    "-livereload"
]

更多

livereload:

这是一款能根据你本地文件(html、css、js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量。


参考:

【Gitbook】实用配置及插件介绍 - zhangjk - 博客园