Perf: Use CDN to accelerate the speed of loading search.xml or search.json

voidking commented 2 years ago

PR Checklist

[x] The commit message follows guidelines for NexT.
[x] Tests for the changes was maked (for bug fixes / features).
- [x] Muse | Mist have been tested.
- [x] Pisces | Gemini have been tested.
[x] Docs in NexT website have been added / updated (for features).

https://github.com/next-theme/theme-next-docs/pull/47

PR Type

[ ] Bugfix.
[x] Feature.
[ ] Code style update (formatting, local variables).
[ ] Refactoring (no functional changes, no api changes).
[ ] Documentation.
[ ] Translation.
[ ] Other... Please describe:

What is the current behavior?

Currently, the next theme loads the search.xml file from the source station.
As the number of articles grows, so does the search.xml file size. Then the loading speed will decrease. If the waiting time exceeds 5 seconds, most people will lose patience. This is a bad experience.

Issue resolved: N/A

What is the new behavior?

In my change, the next theme loads the search.xml file from CDN rather than github pages.
The theme users can config the CDN url for search.xml freely in _config.yml.
According to my experience, as I use the jdDelivr CDN, the search.xml file loading time is reduced to one-third of the original.

Screenshots with this changes: N/A
Link to demo site with this changes: 好好学习的郝

How to use?

In NexT _config.yml:

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false
  # Use CDN to accelerate the speed of loading search.xml
  cdn:
    enable: true
    url: //cdn.jsdelivr.net/gh/<username>/<username>.github.io/search.xml

<username> should be changed to your username in github.
The local_search.cdn.url could be changed to any CDN url for search.xml . So, whether you use github pages or not, you can speed up the file loading speed by configuring your own CDN.

welcome[bot] commented 2 years ago

Thanks so much for opening your first PR here!

CLAassistant commented 2 years ago

All committers have signed the CLA.

ljcbaby commented 2 years ago

You should only set <script>CONFIG.path = 'https://cdn.jsdelivr.net/gh/<username>/<username>.github.io@latest/search.json';</script> in ./source/_data/head.njk and enable theme.custom_file_path.head

voidking commented 2 years ago

You should only set <script>CONFIG.path = 'https://cdn.jsdelivr.net/gh/<username>/<username>.github.io@latest/search.json';</script> in ./source/_data/head.njk and enable theme.custom_file_path.head

Thanks for your reply. Enable localsearch CDN in theme.custom_file_path.head is a good choice. All the custom file configurations are put together. The implementation maybe like this:

{%- if (theme.localsearch.enable and theme.localsearch.cdn.enable) %}
  <script>CONFIG.path = "{{ theme.localsearch.cdn.url }}";</script>
{%- endif %}

But the realization is easy to cause a kind of confusion: I have configured the localsearch CDN at theme.localsearch.cdn, but it didn't work! (Because I have to enable theme.custom_file_path.head too.) So, I think putting the logic in local-search.js is more reasonable. It is easier to configure for users. What do you think?

ljcbaby commented 2 years ago

local search is local search, its cdn loads is an advanced usage.So it is not reasonable to dedicate a configuration item to it. https://github.com/next-theme/hexo-theme-next/commit/c1a2073a10f30d80702ba76576e1ef66550c306f has been adapted for this requirement, I think it's enough.

voidking commented 2 years ago

local search is local search, its cdn loads is an advanced usage.So it is not reasonable to dedicate a configuration item to it. c1a2073 has been adapted for this requirement, I think it's enough.

@ljcbaby Well, it seems we can’t convince each other. @stevenjoezhang @PaperStrike Sorry to bother you, what about your opinions about adding cdn to localsearch?

ljcbaby commented 2 years ago

https://t.me/theme_next_cn/1441 当时我提的修改的想法和你基本是一样的

voidking commented 2 years ago

https://t.me/theme_next_cn/1441 当时我提的修改的想法和你基本是一样的

看了下群组的上下文， @stevenjoezhang @PaperStrike 都是更支持放入 custom_file_path，方案早就有了，只是没有把它作为一个可配置选项，我改下PR，后续telegram群组里沟通吧，感谢~

stevenjoezhang commented 2 years ago

不好意思，我这几天有点事情，没有关注这个问题的讨论。我也不确定这个功能的需求有多大，我稍后在 telegram 群和 GitHub 上发问卷进行调查。

我想这个选项和_config.yml最后的这一部分关联性比较高 https://github.com/next-theme/hexo-theme-next/blob/61048546caa257da12d9b9ba06a3f6a0f74bed87/_config.yml#L875-L879 这里把css设置成https://cdn.jsdelivr.net/gh/username/username.github.io/css/main.css就可以通过 CDN 加载样式表。

或许可以整合一下，根据用户在hexo-deployer-git插件中配置的 GitHub 用户名，自动设置 main.css images和search.xml的 CDN 链接。

ljcbaby commented 2 years ago

我现在反而不赞同这样做。现有的方案足够简单自定这些内置文件的CDN了，没有必要再添加设置项来更加简化了。

ljcbaby commented 2 years ago

必要时在Doc内加上说明和例子才是更加重要的。

voidking commented 2 years ago

感谢两位的答复 @ljcbaby @stevenjoezhang ，简单说一下自己的需求来源吧。
随着站点文档的增多，search.xml文件的加载速度越来越慢，尤其是search.xml文件超过4M之后，经常出现加载时间超过5s的情况，体验很不好，不能忍。比较好的方案就是使用CDN来进行加速，而当前next主题是不支持直接配置CDN来对search.xml的，只能使用一些trick的方式，自己实现一些逻辑。说实话，也是比较简单，尤其对next主题的老玩家来说，就是随手加几行代码。
但是从用户角度看，增加了用户成本，就想着把它作为一个配置项方便用户使用。因此提交了PR，用户可以选择是否使用localsearch的cdn加速，可以自己配置cdn加速，无论是jsdelivr、七牛、网宿还是其他。

按照前面的讨论，现在大致有三种方案：

local_search增加配置项（本PR的方式）。优点是配置简单，是个可选项；缺点是对local-search.js有侵入，并且配置项和其他自定义文件的配置项不会放在一起。
修改head.njk。优点是和所有自定义文件配置在一起，方便集中管理，配置也简单；缺点是提高了一点点门槛，不能一眼看去就知道在哪里进行修改和配置。
根据用户名自动设置search.xml的链接。优点是用户完全不用考虑CDN优化的事情；缺点是缺少了灵活性，用户不能自己设置一个其他的CDN，如果使用gitee，则CDN也会失效。

这些方案各有优劣，保持现状也是个不错的选择，想使用CDN的同学就自己搞一下。而且这个需求也不是高优需求点，后续如果这方面需求增加，可以到时候再看。

next-theme / hexo-theme-next