2

Vuepress全文搜索插件vuepress-plugin-flexsearch-pro

 1 year ago
source link: https://wiki.eryajf.net/pages/b205e9/#%E6%9C%80%E5%90%8E
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Vuepress全文搜索插件vuepress-plugin-flexsearch-pro

这篇文章的发布时间较早，其中的内容可能已经过时，阅读时请注意甄别。

# 前言

之前介绍过 Vuepress 的一款全文搜索插件 fulltext-search，今天来介绍另一款相对不错的全文搜索插件 vuepress-plugin-flexsearch-pro。

# 介绍

插件原项目：vuepress-plugin-flexsearch (opens new window)

这款插件最大的问题就是不支持中文，且是比较早创建的仓库，而且作者最后一次提交是在 21 年，因此基本不维护了。

有人基于这个插件改进了支持中文、英文、德文、韩文、日文的全文搜索的插件：vuepress-plugin-flexsearch-pro (opens new window)

# 效果

先来看下插件安装之后的使用效果：

f3d3707eeb4f2f3d.png

# 安装

可通过如下命令进行安装：

yarn add -D vuepress-plugin-flexsearch-pro

# 配置

精简配置，这就够用了。

// .vuepress/config.js

module.exports = {
    plugins: [
      ['flexsearch-pro'],
      // other plugins
    ]
}
1
2
3
4
5
6
7
8

更丰富的配置项：

// .vuepress/config.js

module.exports = {
    plugins: [
      ['flexsearch-pro', {
        /*
          自定义搜索参数
        */
        searchPaths: ['path1', 'path2'],    // 搜索路径数组，为空表示搜索全部路径
        searchHotkeys: ['s'],    // 激活搜索控件的热键, 默认是 "s" ，也可以添加更多热键
        searchResultLength: 60,    // 搜索结果展示的字符长度, 默认是60个字节
      }],
      // other plugins
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 最后

目前已经介绍了两种比较理想的全文搜索插件，但最终我都没有采用，一个最主要的原因就是启用全文搜索插件之后，打包后的 app.xxx.js 文件膨胀了太多。

实测结果如下同等，在同等内容之下，文件大小对比如下：

  • 不启用全文搜索：2.9M。
  • 启用 vuepress-plugin-flexsearch-pro 插件：7M。
  • 启用 fulltext-search 插件：13M。

而这个 js 文件又是全局样式加载时都会依赖的一个文件，如果文件体积过大，则对于博客整体的访问速度都会有很大的影响，因此这是我放弃使用这两个插件的原因。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK