解决Twikoo评论区在页面刷新时消失问题

当浏览器开启缓存的时候，第一次打开页面可以正常显示twikoo，但F5刷新就直接消失，需要从别的页面跳过来才能显示

问题原因

js顺序的问题，twikoo要放在chunk之前加载

解决方案

和 js 的加载顺序有关，和缓存无关，Cache-Control 不能解决根本问题，建议调整 js 的加载顺序，确保“声明”在“调用”之前执行。

PLAINTEXT

PLAINTEXT

<!-- 声明 --><div id="tcomment"></div><script src="https://cdn.staticfile.org/twikoo/1.6.39/twikoo.all.min.js"></script><!-- 调用 --><script>
twikoo.init({ ... })
</script>

其它方式解决

声明必须在调用之前，之所以缓存之后没有出现问题，是因为<script defer ...>无法保证js的执行先后顺序，被缓存的twikoo js文件恰巧先于网站js执行了，造成了“缓存以后就正常了”的现象。

我用了其它方式解决
关于 CDN 镜像

我开始出问题是用的

PLAINTEXT

PLAINTEXT

https://cdn.staticfile.org/twikoo/1.6.39/twikoo.all.min.js

原因也出在Cache-Control: max-age=2

切换到

PLAINTEXT

PLAINTEXT

https://cdn.bootcdn.net/ajax/libs/twikoo/1.6.39/twikoo.all.min.js

Cache-Control: max-age=31536000
就完全正常了 之前是两秒过期 现在缓存时间长了到没问题了

建议：

目前国内有很多 NPM 和 CDNJS 的 CDN，可以支持相关包文件的高速引用，如：

PLAINTEXT

PLAINTEXT

BootCDN: www.bootcdn.cn七牛云: www.staticfile.org360: cdn.baomitu.com字节跳动: cdn.bytedance.com

但现在 BootCDN 经常出现问题，七牛已经被放弃支持，字节跳动更新不及时，距离上次更新已经两年有余，只剩 360 可以勉强一用，但是存在节点调度不准的问题，比如福建移动经常被分配到国外节点，北京联通却被分配到广州电信，这是极不好的，而且也不完美支持 url 格式和 dnssec、ipv6、unpkg 等功能。所以推荐以下国内高速镜像站点供饮用：

PLAINTEXT

PLAINTEXT

Zstatic：s4.zstatic.net
南科大：mirrors.sustech.edu.cn/cdnjs

其中 Zstatic 用到了镜像回源，也就是说只要访问一次，文件就会被存储到国内的服务器上，再也不用担心缓存过期了，所以建议优先用这个。

PLAINTEXT

PLAINTEXT

https://s4.zstatic.net/ajax/libs/twikoo/1.6.39/twikoo.all.min.js

参考资料:

1. Issue #642 · twikoojs/twikoo (github.com)