在前两篇文章中，我们已经拆清了 RAG 的基本流程。还有 DocumentChunk、metadata 和向量数据库分别解决什么问题。

使用者痛点：

• 抓取网页时选择器失效导致内容缺失或错误。
• 长文本切分粒度过粗，检索不到细节信息。
• 嵌入生成批量大小不合适，导致请求失败或效率低下。
• 内存向量库不持久化，程序重启后知识消失。
• 检索结果没有阈值判断，模型可能给出误导性回答。

准备依赖

示例使用 LangChain.js、Cheerio、通义千问兼容接口和内存向量库：

pnpm add \
@langchain/community \
@langchain/textsplitters \
@langchain/classic \
@langchain/openai \
cheerio \
dotenv

至于第一步先。用 Loader 把网页变成 Document

不同类型的知识来源，需要不同的加载方式。不过，

网页 → Web Loader
PDF → PDF Loader
Word → Docx Loader
CSV → CSV Loader

Loader 的职责不是生成向量。而是把不同格式的原始内容统一转换成 LangChain Document.

这篇文章使用 CheerioWebBaseLoader 加载网页：

import { CheerioWebBaseLoader } from '@langchain/community/document_loaders/web/cheerio';const sourceUrl = 'https://juejin.cn/post/';const cheerioLoader = new CheerioWebBaseLoader(
sourceUrl。{
selector: '.article-viewer> :not',},);const documents = await cheerioLoader.load;

加载完成后得到的是一个 Document 数组。老实说，从其结构来看，

pageContent：通过 CSS 选择器提取的网页正文
metadata.source：原始网页地址
metadata.title：网页标题

用 CSS 选择器提取完整正文

网页正文通常包含标题、列表、表格、代码块等多种元素。需要选择器覆盖这些内容，从当前示例使用来看，

selector: '.article-viewer> :not'

如果网站改版。选择器失效将导致抓取失败，这是常见的痛点之一。

再看接下来，递归切分长文档

A single long document converted into one vector mixes many topics。 leading to coarse retrieval granularity.

分隔符的递归切分策略

缺乏合适的切分策略会导致关键信息被截断，检索效果差。不过，

import { RecursiveCharacterTextSplitter } from '@langchain/textsplitters';const textSplitter = new RecursiveCharacterTextSplitter({
chunkSize: /* e.g.。1024 */,chunkOverlap: /* e.g.,256 */,separators:,});const splitDocuments = await textSplitter.splitDocuments;

Around this page,this step splits one original Document into multiple Chunks. The exact number depends on content size and configuration.

用空字符串完成字符级兜底

The last separator '' forces character-level splitting when no punctuation is found。ensuring chunks stay near chunkSize.

chunkOverlap 问题解决

If a key sentence lies at a chunk boundary:

Chunk ：…，Node.js 的主线程不适合执行耗时的同步 I/O
Chunk ：所以 Web 服务中应优先采用异步文件读取…，

The overlap keeps contextual continuity but too large overlap creates duplicate vectors,raising storage and compute costs.

：分批生成 Embedding

import { OpenAIEmbeddings } from '@langchain/openai';const embeddings = new OpenAIEmbeddings({
从apiKey来看，process.env.DASHSCOPE_API_KEY,model: process.env.EMBEDDINGS_MODEL_NAME。batchSize: /* e.g.,16 */,configuration: {
baseURL: process.env.DASHSCOPE_BASE_URL,},});

The batchSize controls how many texts per request;incorrect sizing may trigger rate limits or slow performance.

第四步这方面，写入内存向量数据库

import { MemoryVectorStore } from '@langchain/classic/vectorstores/memory';const vectorStore = await MemoryVectorStore.fromDocuments(
splitDocuments。embeddings,);

• A memory store is fine for demos but not persistent;a production system needs a durable DB.
• The internal pipeline automatically embeds each chunk and stores its vector plus metadata.
• A restart wipes out knowledge base – a common failure point for beginners.

至于第五步，执行带分数的相似度检索

User question as plain string:

常用 API？'，const scoredResults = await vectorStore.similaritySearchWithScore(
question。/* k */ /* e.g.,5*/,);console.log，This returns top K documents with cosine similarity scores.

*If retrieval threshold isn’t set。irrelevant fragments may be returned,confusing downstream generation.*
The default cosine similarity score ranges;higher means more related. Different databases may return distance instead of similarity – adjust interpretation accordingly.

读取相似度分数示例输出：
\
text\
余弦相似度的观点是，余弦相似度：余弦相似度：

\

\

Create context from top K fragments:
\