提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

插件
2023-03-07 09:51:24 时间

# 前言

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

# 介绍

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

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

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

# 效果

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

# 安装

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

yarn add -D vuepress-plugin-flexsearch-pro

# 配置

精简配置，这就够用了。

// .vuepress/config.js

module.exports = {
    plugins: [
      ['flexsearch-pro'],
      // other plugins
    ]
}

更丰富的配置项：

// .vuepress/config.js

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

# 最后

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

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

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

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

相关文章