一个网站或应用有了内容之后，搜索几乎是最常用的功能之一。文档站要按关键词找章节，后台要按名称找记录，笔记应用要全文检索，商品库要按标题找货。把这件事全交给后端做，用户每敲一个字都要发一次请求，慢而且费服务器资源，输入稍微快一点还会出现结果和输入对不上的情况。用前端库在浏览器里建好索引直接查，输入即出结果，体验和成本都更好。这次整理了 3 款开源免费、可商用的前端搜索库。
三款库分别解决什么
Lunr.js 是款小而完整的全文搜索引擎，可以给文档建索引，支持分词、词干还原、字段权重和模糊匹配，纯前端运行、零依赖，做文档站、博客站内搜索、帮助中心检索非常合适，很多静态站点都用它。FlexSearch 主打性能，建索引和查询都很快，支持增量添加、自定义分词、异步索引和多字段过滤，数据量到几万条也能保持流畅，适合商品库、资料库这类大索引的前端检索。Fuse.js 走的是另一条路，不用建索引，给一个数组直接模糊搜索，按相似度返回排序结果，容错很强，打错字也能找到，适合命令面板、下拉选择这些场景。
前端搜索相比后端搜索好在哪
首屏就能用是最大的优势。数据量不大时，把内容随页面一起下发，浏览器里建好索引，用户输入时不等请求、不转圈，结果几乎和按键同步出现，这种即时感是后端搜索很难做到的。数据不出端也更省心，用户的搜索词不用发给服务器，隐私性更好。当然前端搜索不是万能的，数据量特别大、需要权限过滤、需要跨设备同步的时候，还是得靠后端。判断标准很简单，索引体积能接受、内容不涉及权限的就上前端，否则交后端。
中文场景要特别注意
这几款库默认的分词面向英文，按空格切词，中文没有空格，直接用会把一整句当成一个词，搜索效果很差。解决办法是接一个中文分词，或者在建索引前把文本按单字切分再喂进去，也可以引入中文分词词典。另外同义词和错别字在中文里更常见，搜索的用户容忍度更低，配合模糊匹配能缓解一部分。真要用在中文为主的站内搜索上，分词这一步必须先解决，否则库再好也发挥不出来。
包内容和用法
压缩包里按库名分成了三个目录，每个目录里放了压缩版和未压缩版两种文件，正式项目引压缩版。三款库互相独立、不依赖任何框架，用 script 标签引入就能拿到全局对象，也支持模块化引入。选型上，要正经的站内全文搜索用 Lunr.js，数据量大、追求性能用 FlexSearch，只想在数组里做模糊匹配用 Fuse.js。三者的索引和查询都在浏览器里完成，数据不出端，响应也快，每个目录都附带了说明文档和许可文件。
搜索是那种做好了没人夸、做差了天天被吐槽的功能。用户找不到想要的东西，第一反应就是这个站的搜索没法用，然后就去别处了。花点时间把站内搜索做顺，对留存是有实际帮助的。上手的建议是先拿一个真实的列表试一遍，把数据灌进去建索引，搜几个词看看效果，把中文分词那一步走通，后面接业务数据就快了。这三款加起来一百多 K，按需引入性价比很高，全部可免费商用、修改和再分发，保留各自的许可文件即可。
暂无评论内容