文章目录前言一、整套链路先看懂一步都不能少二、前期依赖包一次性装好三、第一步Loader网页转标准Document3.1 Loader是所有文件的统一转换器3.2 用CSS选择器精准提取正文3.3 Document自带两大核心属性四、第二步递归切分长文档解决检索粗糙问题4.1 为什么不能直接用整篇文章4.2 递归切割器配置实操4.3 递归分隔符的底层逻辑4.4 chunkOverlap重叠参数到底有啥用五、第三步批量生成Embedding向量六、第四步存入向量数据库测试先用内存库七、第五步相似度检索拿匹配度分数7.1 检索代码实现7.2 分数怎么看懂八、第六步拼接上下文丢给大模型回答九、demo离线上生产还差十万八千里十、全文流程总结P.S. 挖到宝藏AI教程全程通俗易懂风趣幽默零基础轻松入门传送门https://blog.csdn.net/qq_34419312前言之前聊RAG的时候咱们举的例子全是提前整理好的文字片段看着特别完美像开了作弊挂。但线下写代码的时候根本不是这么回事我之前第一次搭demo直接把掘金文章复制粘贴成字符串丢进去写完沾沾自喜结果被同事吐槽线上谁有空手动复制网页你这项目上线得雇十个实习生天天扒文章是吧现实里的知识源五花八门网页、PDF、Word、Markdown堆一堆今天咱们拿网页当素材完整走一遍从链接到AI问答的整条流水线每一步都带可运行代码。一、整套链路先看懂一步都不能少随便丢一个网页URL系统内部要走完完整的处理链条顺序错一步都跑不通URL → 下载网页HTML → 过滤广告侧边栏只留正文 → 标准化成Document对象 → 切割成小块Chunk → 生成向量Embedding → 存入向量库 → 根据用户问题检索匹配片段 → 丢给大模型输出答案这条链路跟点外卖流程一模一样URL是下单地址Loader是骑手取餐切分Chunk是分装小餐盒向量库是外卖柜检索就是按你想吃的菜翻柜子最后大模型是给你上菜的服务员。少一个环节你都吃不上饭。二、前期依赖包一次性装好本次demo用LangChain.js做主体Cheerio解析网页通义千问兼容接口生成向量内存向量库做测试安装命令直接复制运行pnpm add \ langchain/community \ langchain/textsplitters \ langchain/classic \ langchain/openai \ cheerio \ dotenv所有包各司其职不用额外装爬虫框架开箱就能解析网页。三、第一步Loader网页转标准Document3.1 Loader是所有文件的统一转换器不同文件对应专属加载工具分工分得清清楚楚网页内容CheerioWebBaseLoaderPDF文件PDF LoaderWord文档Docx Loader表格CSVCSV LoaderLoader就是RAG系统的前台接待不管你是网页、PDF还是表格进来全统一换成叫Document的标准工牌后面的流程只认工牌不认原始文件不然每个格式单独写一套处理逻辑代码能堆成山。3.2 用CSS选择器精准提取正文网页里乱七八糟的导航、评论、广告全是噪音必须靠CSS选择器锁定正文区域示例代码import { CheerioWebBaseLoader } from langchain/community/document_loaders/web/cheerio; const sourceUrl 目标掘金文章链接; const cheerioLoader new CheerioWebBaseLoader( sourceUrl, { selector: .article-viewer :not(style), }, ); const documents await cheerioLoader.load();selector配置含义只读取文章容器内的内容自动过滤样式标签标题、列表、表格、代码块全部保留到pageContent里。这里踩坑提醒网站一改版DOM结构直接报废上次我写好的选择器平台更新页面后抓出来全是空文本排查半小时才发现容器class改名了等于白写。3.3 Document自带两大核心属性加载完成后得到Document数组两个核心字段pageContent清洗后的文章纯正文metadata存放网页地址、文章标题等溯源信息这一步完全不生成向量只做格式标准化别搞混前后步骤。四、第二步递归切分长文档解决检索粗糙问题4.1 为什么不能直接用整篇文章一整篇文章只生成一个向量会出现严重问题文章里面同时讲文件API、异步回调、Promise用户只问fs模块相关内容检索出来一大段无关文字AI回答精准度直接崩盘。好比你去图书馆找一本技术书整本书打包塞一个袋子里你想找某一页内容只能拎一整袋翻效率极低切成一页一页小纸条检索才能精准定位。4.2 递归切割器配置实操import { RecursiveCharacterTextSplitter } from langchain/textsplitters; const textSplitter new RecursiveCharacterTextSplitter({ chunkSize: 400, chunkOverlap: 80, separators: [ \n\n, \n, 。, , , , , , ], }); const splitDocuments await textSplitter.splitDocuments(documents);测试掘金文章直接从1个完整文档拆成30个独立Chunk数量随文章长度变动。4.3 递归分隔符的底层逻辑切割会按顺序逐级尝试拆分优先保留完整语义段落换行 → 单行换行 → 中文句号 → 感叹号/问号/分号 → 逗号 → 空格 → 字符兜底数组最后放空字符串就算遇到无标点代码块、纯英文内容也能强制控制文本长度。4.4 chunkOverlap重叠参数到底有啥用关键语句刚好卡在两个Chunk中间时单独读取任意一块都会丢失完整逻辑。示例前一段末尾讲主线程不适合同步IO后一段开头讲优先异步读取分开看完全看不懂因果。重叠就像电视剧两集片尾片头重复一小段剧情防止你断片看不懂前后关联。但重叠值不能拉满数值太大重复文本暴增向量存储、接口调用成本直接翻倍纯纯浪费钱。chunkSize和chunkOverlap没有万能固定值要根据文档类型、向量模型、线上检索效果反复调试。五、第三步批量生成Embedding向量咱们用通义千问兼容OpenAI接口生成文本向量配置代码如下import { OpenAIEmbeddings } from langchain/openai; const embeddings new OpenAIEmbeddings({ apiKey: process.env.DASHSCOPE_API_KEY, model: process.env.EMBEDDINGS_MODEL_NAME, batchSize: 10, configuration: { baseURL: process.env.DASHSCOPE_BASE_URL, }, });batchSize控制单次接口请求文本数量本次30个Chunk会自动分3批调用不用手动循环处理。批量参数别乱填服务商有接口限流一次塞50条直接返回429限流报错半夜调试接口卡在这里差点怀疑人生。六、第四步存入向量数据库测试先用内存库import { MemoryVectorStore } from langchain/classic/vectorstores/memory; const vectorStore await MemoryVectorStore.fromDocuments( splitDocuments, embeddings, );fromDocuments内部自动完成两件事读取每个Chunk文本、调用向量接口生成向量、统一保存文本、向量和元数据。内存向量库只适合学习和小demo程序一关数据直接清空线上项目敢用这个等于每天手动重建知识库运维能找你谈话。生产必须换持久化向量库。七、第五步相似度检索拿匹配度分数7.1 检索代码实现const question fs 模块有哪些常用 API; const scoredResults await vectorStore.similaritySearchWithScore(question, 3);方法会自动把用户问题转为向量和库内所有Chunk向量做比对返回Top3匹配内容对应分数。7.2 分数怎么看懂内存向量库默认计算余弦相似度数值区间0~1数字越大代表和问题关联性越强。示例返回结果0.6843、0.6454、0.6131分数越低越无关。换其他向量库要注意有的返回距离值数字越小越匹配上次我直接沿用余弦相似度判断逻辑检索结果全是无关内容查了半天才发现指标定义完全相反。八、第六步拼接上下文丢给大模型回答检索出来的片段不能直接丢给模型要格式化拼接进提示词限制AI只能根据检索内容作答const docs scoredResults.map(([doc]) doc); const context docs .map( (doc, index) [片段 ${index 1}]\n${doc.pageContent}, ) .join(\n\n-----\n\n); const prompt 你是一个文章阅读助手。请只根据给定文章片段回答问题 如果片段没有提供答案请明确说明信息不足。 文章片段 ${context} 问题${question} 回答 ; const response await model.invoke(prompt); console.log(response.content);格式化片段后模型能精准提取文章内readFileSync、readFile、node:fs/promises等API信息不会凭空编造内容。九、demo离线上生产还差十万八千里咱们跑通的示例只能用来学习上线必须补齐这些功能网页DOM改版自动适配、捕获抓取失败、空内容过滤重复文档去重、网页内容增量更新同步替换持久化向量数据库保证重启不丢数据相似度阈值过滤低匹配片段处理无答案场景元数据筛选、回答附带原文来源链接Chunk参数批量测试调优接入Rerank重排优化检索提示词注入防护不信任外部网页内容不能覆盖系统规则很多新手跑通demo就敢上线结果用户搜问题全是无关内容、网页抓取一堆广告、重启服务知识库清空线上bug堆一堆改起来比从头写还费劲。十、全文流程总结网页接入RAG不是丢个URL就能完事完整流水线一句话概括网页链接 → Cheerio加载器标准化文档 → 递归切割语义块 → 批量生成向量 → 存入向量库 → 相似度检索高匹配片段 → 拼接上下文交给大模型输出答案外部网页经过这套完整处理流程才能转化成支持语义检索的可用知识库少任意一环RAG效果都会大打折扣。P.S. 挖到宝藏AI教程全程通俗易懂风趣幽默零基础轻松入门传送门https://blog.csdn.net/qq_34419312