从 URL 到 Chunk：网页爬取与语义切割实战，建立 RAG 知识库的第一步先

前置知识

• 了解 RAG的基本概念
• 了解 LangChain 的 Document 对象结构
• 有 Node.js + npm 基础

如果还不熟悉这些？立即学习，否则会卡在后续步骤！

一、为什么需要网页爬取 + 文档切割？真实痛点揭秘，⚠️⚠️⚠️

RAG 知识库建立的完整链路

mermaid graph TD 使用者想建立一个"AI 技术博客知识库" │ ▼ ┌────────────────────────────────────────────────────────────┐ │ Step : 数据采集 │ │ 网页 URL → HTTP 请求 → HTML 字符串 → 提取纯文本 │ │ │ └───────┴---------------------------------------------------┘ │ ▼ ┌───┴─┐▼▼▼▼▼▼▼▼▼▼▼─┐├───┐├───┐├───┐├───┐├───┐├───┐├───┐├───┴─███████████│ Step : 文档切割 ││ 长文本 → 按语义分隔符切割 → 大小适中的 Chunk ││ │ └──--─╱╱╱╱╱╱╱╱╱╲──--─╲──--───--───--───--───--───--─– ┌──■■■■■■■■■■■■■│ Step : 向量化存储 ││ Chunk → Embedding → VectorStore → Retriever ││ │ └---------––––––—---—–----—---------—---—----—— ———— ┌──↗↗↗↗↗↗↗↗使用者提问 → 检索相关 Chunk → LLM 基于 Chunk 回答

🔥 这篇文章聚焦 Step1 + Step2!

为什么不能直接给 LLM 整个网页？😢😢😢

> 强烈警告：跳过这部分会导致你的RAG程序完全失效！

二、手写爬虫：axios + cheerio 抓取网页🕵️‍♂️🕵️‍♂️🕵️‍♂️

主要思路

mermaid flowchart LR A --> B B --> C C --> D{cheerio解析} D --> E

完整代码

javascript hl_lines="" linenums="" import axios from 'axios';import * as cheerio from 'cheerio';

const targetUrl = 'https://example.com';// ❌ 注意替换为真实目标URL

async function crawlPage { try { // 🔥关键点1：必须设置User-Agent否则可能被封禁！const { data: html } = await axios.get(targetUrl。{ headers: { 'User-Agent': 'Mozilla/5.0...' },timeout: 10000 // ⚠️防止超时！})，

// 🔥关键点2：cheerio.load将HTML转为DOM树结构！
const $ = cheerio.load;// 🔥关键点3：选择器决定提取内容质量！const pageContent = $.text;console.log，return pageContent;

} catch { console.error;throw error，}}

cheerio工作流程

mermaid graph TD;老实说，A --> B{cheerio.load} B --> C C --> D D --> E

❌ 常见错误清单： ① 未设置User-Agent被封禁 ② CSS选择器错误返回空 ③ 未处理异常导致崩溃 ④ 超时设置太短 ⑤ 未验证返回数据是否有效 ⑥ 未处理重定向情况 ⑦ 未处理编码问题 ⑧ 对动态加载页面使用静态解析 ⑨ 频繁请求未加延时被封IP ⑩ 未保存原始URL用于调试 > 推荐方法：使用旋转代理池+异常重试机制+日志记录 这是公司级爬虫必须做到的！

三、LangChain 内置方案：CheerioWebBaseLoader🚀🚀🚀

什么是 Loader？LangChain 的标准输入接口

mermaid graph LR;A -- 加载器 --> B B -- TextSplitter切割 --> C C -- Embedding向量化 --> D

"Loader 是LangChain整体环境中关键的一环！所有数据源都通过它标准化为Document格式。"- LangChain官方开发者

> ❤️ 推荐阅读：《LangChain Loader详细说明与性能调整教程》

"如果你只需要快速上线而非学习底层原理,直接使用CheerioWebBaseLoader!""""

> 注意事项 <" ① 必须先安装依赖:

npm install @langchain/community"
② 支持自定义HTTP头部参数"
③ metadata自动包含source属性"
④ 支持并发加载多个URL"
⑤ 自动处理编码问题"
⑥ 内部已集成错误重试机制"
⑦ 支持cookie传递"
⑧ 能够跟踪跳转链接"
⑨ 自动剔除空白节点"
⑩ 支持JSX语法解析"

> 高级用法示例 <" const loader = new CheerioWebBaseLoader(url。{ selector:'div.content article',headers:{ 'Authorization':'Bearer token','Cookie':'sessionid=xyz' },timeoutMs:20,maxDepthOfRetriesForRedirects:-1,keepOnlyTagsWithClass:,removeEmptyParagraphs:true,})

""

四、文档切割大师课程：《RecursiveCharacterTextSplitter》深度剖析!"