はじめに
AI駆動開発でプロジェクトを進めており、開発と並行してマークダウン形式のドキュメントを作成していました。
ドキュメントの閲覧にはDocusaurusを採用し、UX向上のために検索機能を追加しようと@easyops-cn/docusaurus-search-localを導入したところ、大幅に読み込みに時間がかかる問題が発生しました。
忙しい人向け
docusaurus.config.jsでdocsRouteBasePathオプションに"/"を設定することで解決しました。
環境
- Docusaurus: ^3.8.1
- @easyops-cn/docusaurus-search-local: ^0.52.1
問題
@easyops-cn/docusaurus-search-localをデフォルト設定で導入したところ、ページの読み込みに時間がかかり、検索インデックスの構築が終わらない状態になりました。
最初の設定は以下のような形でした：
plugins: [
[
require.resolve("@easyops-cn/docusaurus-search-local"),
{
// 特にオプションを指定していない
},
],
],
原因
原因は、Docusaurusのpresetで設定したrouteBasePathと、検索プラグインのdocsRouteBasePathが一致していなかったことでした。
今回のプロジェクトでは、docusaurus.config.jsで以下のようにドキュメントのルートパスを"/"に設定していました：
presets: [
[
"classic",
{
docs: {
sidebarPath: require.resolve("./sidebars.js"),
editUrl: "https://xxxxx.xxxx",
routeBasePath: "/", // Serve docs at the site's root
},
blog: false,
theme: {
customCss: require.resolve("./src/css/custom.css"),
},
},
],
],
一方、@easyops-cn/docusaurus-search-localのdocsRouteBasePathのデフォルト値は"/docs"となっています。
公式リポジトリの説明を確認するとこのように記載があります。
docsRouteBasePath: Base route path(s) of docs. Slash at beginning is not required. Note: for docs-only mode, this needs
to be the same as routeBasePath in your @docusaurus/preset-classic config e.g., "/".
解決方法
docusaurus.config.jsでdocsRouteBasePathオプションに"/"を設定することで解決しました。
plugins: [
[
require.resolve("@easyops-cn/docusaurus-search-local"),
{
docsRouteBasePath: "/",
},
],
],
この設定により、検索インデックスが正しいパスでドキュメントをインデックス化し、読み込み問題が解消されました。
同じような問題に遭遇した方の参考になれば幸いです。