[{"data":1,"prerenderedAt":3022},["ShallowReactive",2],{"article-/topics/frontend/low-code-platform-architecture-analysis":3,"related-frontend":621,"content-query-PR3LzDIzIM":2546},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":12,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":23,"_type":615,"_id":616,"_source":617,"_file":618,"_stem":619,"_extension":620},"/topics/frontend/low-code-platform-architecture-analysis","frontend",false,"","低代码平台技术架构解析：从页面编排到运行时引擎的完整拆解","低代码平台的难点不在拖拽本身，而在模型约束、运行时隔离、数据编排与发布治理。本文从核心分层与失败案例出发，讲清低代码平台的技术架构该怎么搭。","2026-04-23","HTMLPAGE 团队",[13,14,15,16,17],"Low Code","Frontend Architecture","Visual Editor","Runtime Engine","Platform Engineering","/images/topics/frontend/low-code-platform-architecture-analysis.jpg","low code platform architecture dashboard product team workspace",6803554,"https://www.pexels.com/photo/a-man-sitting-at-the-table-while-using-computer-6803554/",15,{"type":24,"children":25,"toc":602},"root",[26,34,39,69,74,81,86,91,109,114,132,137,143,148,153,176,181,186,204,209,215,220,225,248,253,271,276,281,286,291,314,319,337,342,347,352,357,380,385,390,408,413,418,423,428,451,456,462,467,490,495,518,523,528,556,561,566,571],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","很多团队谈低代码平台时，第一反应都是拖拽编辑器。",{"type":27,"tag":28,"props":35,"children":36},{},[37],{"type":32,"value":38},"但真正做过平台的人都知道，拖拽只是最表层的一环。低代码平台真正难的是：",{"type":27,"tag":40,"props":41,"children":42},"ul",{},[43,49,54,59,64],{"type":27,"tag":44,"props":45,"children":46},"li",{},[47],{"type":32,"value":48},"页面结构怎么建模",{"type":27,"tag":44,"props":50,"children":51},{},[52],{"type":32,"value":53},"组件能力怎么约束",{"type":27,"tag":44,"props":55,"children":56},{},[57],{"type":32,"value":58},"数据源和动作如何编排",{"type":27,"tag":44,"props":60,"children":61},{},[62],{"type":32,"value":63},"运行时如何保证稳定与安全",{"type":27,"tag":44,"props":65,"children":66},{},[67],{"type":32,"value":68},"发布后的页面怎么治理",{"type":27,"tag":28,"props":70,"children":71},{},[72],{"type":32,"value":73},"如果这些问题没有先想清楚，编辑器做得越快，后期返工往往越大。低代码平台不是“把页面编辑器做复杂一点”，而是一套围绕配置驱动、运行时执行和平台治理展开的系统工程。",{"type":27,"tag":75,"props":76,"children":78},"h2",{"id":77},"先分清三层编辑层协议层运行层",[79],{"type":32,"value":80},"先分清三层：编辑层、协议层、运行层",{"type":27,"tag":28,"props":82,"children":83},{},[84],{"type":32,"value":85},"低代码平台最常见的失败，是把编辑器代码和线上运行代码混在一起。",{"type":27,"tag":28,"props":87,"children":88},{},[89],{"type":32,"value":90},"更稳的做法，是明确拆成三层：",{"type":27,"tag":40,"props":92,"children":93},{},[94,99,104],{"type":27,"tag":44,"props":95,"children":96},{},[97],{"type":32,"value":98},"编辑层：负责拖拽、布局、属性面板、交互配置",{"type":27,"tag":44,"props":100,"children":101},{},[102],{"type":32,"value":103},"协议层：负责把页面结构、组件属性、数据源、动作流抽象成统一 schema",{"type":27,"tag":44,"props":105,"children":106},{},[107],{"type":32,"value":108},"运行层：负责在线上环境把 schema 渲染成真实页面并执行逻辑",{"type":27,"tag":28,"props":110,"children":111},{},[112],{"type":32,"value":113},"这三层拆开后，平台才会具备几个关键能力：",{"type":27,"tag":40,"props":115,"children":116},{},[117,122,127],{"type":27,"tag":44,"props":118,"children":119},{},[120],{"type":32,"value":121},"编辑器可以持续演进，而不直接影响线上渲染",{"type":27,"tag":44,"props":123,"children":124},{},[125],{"type":32,"value":126},"运行时可以做裁剪，避免把整个编辑器打进生产包",{"type":27,"tag":44,"props":128,"children":129},{},[130],{"type":32,"value":131},"schema 可以成为跨版本迁移和内容治理的基础",{"type":27,"tag":28,"props":133,"children":134},{},[135],{"type":32,"value":136},"低代码平台的核心资产，从来不是编辑器 UI，而是中间这层 schema 协议。",{"type":27,"tag":75,"props":138,"children":140},{"id":139},"schema-设计决定了平台上限",[141],{"type":32,"value":142},"Schema 设计决定了平台上限",{"type":27,"tag":28,"props":144,"children":145},{},[146],{"type":32,"value":147},"很多平台一开始直接把组件树序列化成一份 JSON，看起来很快能跑，但后期很容易失控。",{"type":27,"tag":28,"props":149,"children":150},{},[151],{"type":32,"value":152},"一个可持续的 schema，至少要明确四类信息：",{"type":27,"tag":40,"props":154,"children":155},{},[156,161,166,171],{"type":27,"tag":44,"props":157,"children":158},{},[159],{"type":32,"value":160},"页面结构：节点层级、布局容器、区域边界",{"type":27,"tag":44,"props":162,"children":163},{},[164],{"type":32,"value":165},"组件配置：属性、样式、默认值、可编辑范围",{"type":27,"tag":44,"props":167,"children":168},{},[169],{"type":32,"value":170},"数据依赖：接口、变量、转换规则、缓存策略",{"type":27,"tag":44,"props":172,"children":173},{},[174],{"type":32,"value":175},"动作编排：点击、表单提交、跳转、联动、权限控制",{"type":27,"tag":28,"props":177,"children":178},{},[179],{"type":32,"value":180},"如果 schema 只描述“长什么样”，却不描述“怎么取数、怎么执行动作、哪些字段允许改”，平台很快就会退化成半手工开发工具。",{"type":27,"tag":28,"props":182,"children":183},{},[184],{"type":32,"value":185},"更实际的原则是：",{"type":27,"tag":40,"props":187,"children":188},{},[189,194,199],{"type":27,"tag":44,"props":190,"children":191},{},[192],{"type":32,"value":193},"schema 要能被编辑器读写",{"type":27,"tag":44,"props":195,"children":196},{},[197],{"type":32,"value":198},"schema 要能被运行时稳定消费",{"type":27,"tag":44,"props":200,"children":201},{},[202],{"type":32,"value":203},"schema 要能做版本迁移和差异比较",{"type":27,"tag":28,"props":205,"children":206},{},[207],{"type":32,"value":208},"这意味着 schema 既要足够表达业务，又不能和具体实现细节绑死。",{"type":27,"tag":75,"props":210,"children":212},{"id":211},"组件体系不是越多越好而是越可控越好",[213],{"type":32,"value":214},"组件体系不是越多越好，而是越可控越好",{"type":27,"tag":28,"props":216,"children":217},{},[218],{"type":32,"value":219},"低代码平台最容易出现的幻觉，是“组件越多，能力越强”。",{"type":27,"tag":28,"props":221,"children":222},{},[223],{"type":32,"value":224},"实际情况往往相反。组件数量快速膨胀后，最先失控的是：",{"type":27,"tag":40,"props":226,"children":227},{},[228,233,238,243],{"type":27,"tag":44,"props":229,"children":230},{},[231],{"type":32,"value":232},"属性面板越来越复杂",{"type":27,"tag":44,"props":234,"children":235},{},[236],{"type":32,"value":237},"组件之间行为不一致",{"type":27,"tag":44,"props":239,"children":240},{},[241],{"type":32,"value":242},"业务组件强耦合，无法复用",{"type":27,"tag":44,"props":244,"children":245},{},[246],{"type":32,"value":247},"平台升级时兼容成本陡增",{"type":27,"tag":28,"props":249,"children":250},{},[251],{"type":32,"value":252},"所以组件体系要分层：",{"type":27,"tag":40,"props":254,"children":255},{},[256,261,266],{"type":27,"tag":44,"props":257,"children":258},{},[259],{"type":32,"value":260},"基础组件：文本、图片、按钮、容器、列表",{"type":27,"tag":44,"props":262,"children":263},{},[264],{"type":32,"value":265},"业务组件：商品卡片、表单块、价格模块、营销横幅",{"type":27,"tag":44,"props":267,"children":268},{},[269],{"type":32,"value":270},"组合模板：完整 section 或页面片段",{"type":27,"tag":28,"props":272,"children":273},{},[274],{"type":32,"value":275},"平台层最需要守住的是基础能力和扩展边界，业务层则尽量通过组合和配置完成，而不是把每个业务需求都固化成一个新组件。",{"type":27,"tag":75,"props":277,"children":279},{"id":278},"数据源与动作流必须独立设计",[280],{"type":32,"value":278},{"type":27,"tag":28,"props":282,"children":283},{},[284],{"type":32,"value":285},"很多低代码平台做不好，不是页面渲染差，而是数据链路太弱。",{"type":27,"tag":28,"props":287,"children":288},{},[289],{"type":32,"value":290},"典型问题包括：",{"type":27,"tag":40,"props":292,"children":293},{},[294,299,304,309],{"type":27,"tag":44,"props":295,"children":296},{},[297],{"type":32,"value":298},"数据源直接写死在组件里",{"type":27,"tag":44,"props":300,"children":301},{},[302],{"type":32,"value":303},"同一接口被重复请求",{"type":27,"tag":44,"props":305,"children":306},{},[307],{"type":32,"value":308},"变量来源不清楚，编辑时能配，运行时拿不到",{"type":27,"tag":44,"props":310,"children":311},{},[312],{"type":32,"value":313},"动作流没有错误处理和回滚机制",{"type":27,"tag":28,"props":315,"children":316},{},[317],{"type":32,"value":318},"更合理的做法是把数据和动作当成平台一级能力：",{"type":27,"tag":40,"props":320,"children":321},{},[322,327,332],{"type":27,"tag":44,"props":323,"children":324},{},[325],{"type":32,"value":326},"数据源中心：统一管理接口、鉴权、缓存、变量注入",{"type":27,"tag":44,"props":328,"children":329},{},[330],{"type":32,"value":331},"表达式引擎：支持有限度的数据转换和条件判断",{"type":27,"tag":44,"props":333,"children":334},{},[335],{"type":32,"value":336},"动作编排层：支持串行、并行、失败兜底和埋点回传",{"type":27,"tag":28,"props":338,"children":339},{},[340],{"type":32,"value":341},"这样做的价值在于，组件只关心“消费什么”，不用关心“怎么请求”。平台也更容易在运行时对权限、缓存、重试和限流做统一治理。",{"type":27,"tag":75,"props":343,"children":345},{"id":344},"运行时引擎要比编辑器更保守",[346],{"type":32,"value":344},{"type":27,"tag":28,"props":348,"children":349},{},[350],{"type":32,"value":351},"编辑器可以追求灵活，运行时必须优先稳定。",{"type":27,"tag":28,"props":353,"children":354},{},[355],{"type":32,"value":356},"运行时引擎至少要处理这些问题：",{"type":27,"tag":40,"props":358,"children":359},{},[360,365,370,375],{"type":27,"tag":44,"props":361,"children":362},{},[363],{"type":32,"value":364},"schema 兼容：老页面能否在新引擎下继续运行",{"type":27,"tag":44,"props":366,"children":367},{},[368],{"type":32,"value":369},"资源加载：动态组件、样式、脚本如何拆包与预加载",{"type":27,"tag":44,"props":371,"children":372},{},[373],{"type":32,"value":374},"安全隔离：表达式、动作、远程资源如何限制边界",{"type":27,"tag":44,"props":376,"children":377},{},[378],{"type":32,"value":379},"降级策略：组件异常、接口失败时如何回退",{"type":27,"tag":28,"props":381,"children":382},{},[383],{"type":32,"value":384},"低代码平台常见的事故，不是编辑器崩，而是某次 schema 变更让大量线上页面同时失效。",{"type":27,"tag":28,"props":386,"children":387},{},[388],{"type":32,"value":389},"所以运行时通常要比编辑器更保守：",{"type":27,"tag":40,"props":391,"children":392},{},[393,398,403],{"type":27,"tag":44,"props":394,"children":395},{},[396],{"type":32,"value":397},"支持灰度发布和版本锁定",{"type":27,"tag":44,"props":399,"children":400},{},[401],{"type":32,"value":402},"支持 schema migration",{"type":27,"tag":44,"props":404,"children":405},{},[406],{"type":32,"value":407},"支持监控、告警和回滚",{"type":27,"tag":28,"props":409,"children":410},{},[411],{"type":32,"value":412},"没有这些能力，平台越大，线上风险越高。",{"type":27,"tag":75,"props":414,"children":416},{"id":415},"发布链路决定平台能否进入真实业务",[417],{"type":32,"value":415},{"type":27,"tag":28,"props":419,"children":420},{},[421],{"type":32,"value":422},"很多团队把“能保存页面”当作平台上线节点，但真正让业务愿意长期用的平台，关键在发布治理。",{"type":27,"tag":28,"props":424,"children":425},{},[426],{"type":32,"value":427},"你至少要回答这些问题：",{"type":27,"tag":40,"props":429,"children":430},{},[431,436,441,446],{"type":27,"tag":44,"props":432,"children":433},{},[434],{"type":32,"value":435},"页面是否支持草稿、预览、正式版本",{"type":27,"tag":44,"props":437,"children":438},{},[439],{"type":32,"value":440},"不同环境的接口地址和配置如何隔离",{"type":27,"tag":44,"props":442,"children":443},{},[444],{"type":32,"value":445},"页面发布是否支持审批、审计和回滚",{"type":27,"tag":44,"props":447,"children":448},{},[449],{"type":32,"value":450},"谁能改组件、谁能改数据源、谁能发布",{"type":27,"tag":28,"props":452,"children":453},{},[454],{"type":32,"value":455},"低代码平台一旦进入营销活动、运营后台或多团队协作场景，这些能力会比拖拽体验更重要。",{"type":27,"tag":75,"props":457,"children":459},{"id":458},"一个常见失败案例把低代码做成可视化拼页面脚本",[460],{"type":32,"value":461},"一个常见失败案例：把低代码做成“可视化拼页面脚本”",{"type":27,"tag":28,"props":463,"children":464},{},[465],{"type":32,"value":466},"不少平台第一版都能快速出成果，但几个月后会遇到同一类问题：",{"type":27,"tag":40,"props":468,"children":469},{},[470,475,480,485],{"type":27,"tag":44,"props":471,"children":472},{},[473],{"type":32,"value":474},"新场景只能靠加特例支持",{"type":27,"tag":44,"props":476,"children":477},{},[478],{"type":32,"value":479},"页面 schema 越来越混乱",{"type":27,"tag":44,"props":481,"children":482},{},[483],{"type":32,"value":484},"编辑器改一个控件，线上十几个页面异常",{"type":27,"tag":44,"props":486,"children":487},{},[488],{"type":32,"value":489},"发布以后没有可追溯的版本记录",{"type":27,"tag":28,"props":491,"children":492},{},[493],{"type":32,"value":494},"根因通常不是前端写得不够快，而是架构里缺少清晰边界：",{"type":27,"tag":40,"props":496,"children":497},{},[498,503,508,513],{"type":27,"tag":44,"props":499,"children":500},{},[501],{"type":32,"value":502},"schema 没有治理",{"type":27,"tag":44,"props":504,"children":505},{},[506],{"type":32,"value":507},"组件没有分层",{"type":27,"tag":44,"props":509,"children":510},{},[511],{"type":32,"value":512},"数据和动作没有平台化",{"type":27,"tag":44,"props":514,"children":515},{},[516],{"type":32,"value":517},"运行时和编辑器耦合太深",{"type":27,"tag":28,"props":519,"children":520},{},[521],{"type":32,"value":522},"低代码平台一旦沦为“带 GUI 的页面脚本拼装器”，后面几乎一定要重做中台层。",{"type":27,"tag":75,"props":524,"children":526},{"id":525},"一份可直接复用的检查清单",[527],{"type":32,"value":525},{"type":27,"tag":40,"props":529,"children":530},{},[531,536,541,546,551],{"type":27,"tag":44,"props":532,"children":533},{},[534],{"type":32,"value":535},"是否把编辑层、协议层、运行层拆开设计",{"type":27,"tag":44,"props":537,"children":538},{},[539],{"type":32,"value":540},"schema 是否同时支持编辑、运行、迁移和审计",{"type":27,"tag":44,"props":542,"children":543},{},[544],{"type":32,"value":545},"组件体系是否分清基础组件、业务组件和模板层",{"type":27,"tag":44,"props":547,"children":548},{},[549],{"type":32,"value":550},"数据源与动作流是否独立于组件实现",{"type":27,"tag":44,"props":552,"children":553},{},[554],{"type":32,"value":555},"发布链路是否具备版本、回滚、权限和审计能力",{"type":27,"tag":75,"props":557,"children":559},{"id":558},"总结",[560],{"type":32,"value":558},{"type":27,"tag":28,"props":562,"children":563},{},[564],{"type":32,"value":565},"低代码平台的核心不是“让页面能拖出来”，而是让配置、运行和治理成为同一套稳定体系。只要先守住 schema、组件边界、数据动作链路和发布治理，平台才会从演示工具变成可持续的生产基础设施。",{"type":27,"tag":28,"props":567,"children":568},{},[569],{"type":32,"value":570},"进一步阅读：",{"type":27,"tag":40,"props":572,"children":573},{},[574,584,593],{"type":27,"tag":44,"props":575,"children":576},{},[577],{"type":27,"tag":578,"props":579,"children":581},"a",{"href":580},"/topics/frontend/enterprise-component-library-complete-process",[582],{"type":32,"value":583},"构建企业级组件库完整流程",{"type":27,"tag":44,"props":585,"children":586},{},[587],{"type":27,"tag":578,"props":588,"children":590},{"href":589},"/topics/frontend/high-performance-editor-guide",[591],{"type":32,"value":592},"构建高性能富文本编辑器",{"type":27,"tag":44,"props":594,"children":595},{},[596],{"type":27,"tag":578,"props":597,"children":599},{"href":598},"/topics/frontend/frontend-monitoring-system-design-implementation",[600],{"type":32,"value":601},"前端监控系统设计与实现",{"title":7,"searchDepth":603,"depth":603,"links":604},3,[605,607,608,609,610,611,612,613,614],{"id":77,"depth":606,"text":80},2,{"id":139,"depth":606,"text":142},{"id":211,"depth":606,"text":214},{"id":278,"depth":606,"text":278},{"id":344,"depth":606,"text":344},{"id":415,"depth":606,"text":415},{"id":458,"depth":606,"text":461},{"id":525,"depth":606,"text":525},{"id":558,"depth":606,"text":558},"markdown","content:topics:frontend:low-code-platform-architecture-analysis.md","content","topics/frontend/low-code-platform-architecture-analysis.md","topics/frontend/low-code-platform-architecture-analysis","md",[622,956,1268],{"_path":623,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":624,"description":625,"keywords":626,"image":632,"author":633,"date":634,"readingTime":635,"topic":5,"body":636,"_type":615,"_id":953,"_source":617,"_file":954,"_stem":955,"_extension":620},"/topics/frontend/react-hooks-guide","React Hooks 完全指南","全面讲解 React Hooks，包括内置钩子、自定义钩子和最佳实践",[627,628,629,630,631],"React","Hooks","自定义钩子","状态管理","函数组件","/images/topics/react-hooks-guide.jpg","AI Content Team","2025-12-08",23,{"type":24,"children":637,"toc":934},[638,643,648,654,661,674,680,689,695,704,710,716,725,731,740,746,755,761,770,775,781,790,795,808,836,847,875,880],{"type":27,"tag":75,"props":639,"children":641},{"id":640},"react-hooks-完全指南",[642],{"type":32,"value":624},{"type":27,"tag":28,"props":644,"children":645},{},[646],{"type":32,"value":647},"Hooks 改变了 React 的开发方式。本文全面讲解如何使用和创建 Hooks。",{"type":27,"tag":75,"props":649,"children":651},{"id":650},"内置-hooks",[652],{"type":32,"value":653},"内置 Hooks",{"type":27,"tag":655,"props":656,"children":658},"h3",{"id":657},"usestate-状态管理",[659],{"type":32,"value":660},"useState - 状态管理",{"type":27,"tag":662,"props":663,"children":668},"pre",{"className":664,"code":666,"language":667,"meta":7},[665],"language-javascript","import { useState } from 'react'\n\nfunction Counter() {\n  const [count, setCount] = useState(0)\n  const [name, setName] = useState('John')\n  const [user, setUser] = useState({\n    age: 30,\n    email: 'john@example.com',\n  })\n  \n  // 使用函数初始化状态（对于复杂初始值）\n  const [data, setData] = useState(() => {\n    console.log('初始化数据...')\n    return fetchInitialData() // 仅在首次渲染时调用\n  })\n  \n  return (\n    \u003Cdiv>\n      \u003Cp>计数: {count}\u003C/p>\n      \u003Cbutton onClick={() => setCount(count + 1)}>增加\u003C/button>\n      \n      {/* 函数式更新 */}\n      \u003Cbutton onClick={() => setCount(prev => prev + 1)}>\n        函数式增加\n      \u003C/button>\n      \n      {/* 更新对象 */}\n      \u003Cbutton onClick={() => setUser({ ...user, age: user.age + 1 })}>\n        增加年龄\n      \u003C/button>\n    \u003C/div>\n  )\n}\n","javascript",[669],{"type":27,"tag":670,"props":671,"children":672},"code",{"__ignoreMap":7},[673],{"type":32,"value":666},{"type":27,"tag":655,"props":675,"children":677},{"id":676},"useeffect-副作用处理",[678],{"type":32,"value":679},"useEffect - 副作用处理",{"type":27,"tag":662,"props":681,"children":684},{"className":682,"code":683,"language":667,"meta":7},[665],"import { useState, useEffect } from 'react'\n\nfunction DataFetcher() {\n  const [data, setData] = useState(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState(null)\n  const [userId, setUserId] = useState(1)\n  \n  // 副作用 - 每次渲染后执行\n  useEffect(() => {\n    console.log('组件已挂载或已更新')\n  })\n  \n  // 挂载时执行一次\n  useEffect(() => {\n    console.log('组件已挂载')\n    \n    return () => {\n      console.log('组件已卸载')\n    }\n  }, [])\n  \n  // 当 userId 改变时执行\n  useEffect(() => {\n    let isMounted = true // 防止内存泄漏\n    \n    const fetchData = async () => {\n      setLoading(true)\n      try {\n        const response = await fetch(\\`/api/users/\\${userId}\\`)\n        const result = await response.json()\n        \n        if (isMounted) {\n          setData(result)\n        }\n      } catch (err) {\n        if (isMounted) {\n          setError(err)\n        }\n      } finally {\n        if (isMounted) {\n          setLoading(false)\n        }\n      }\n    }\n    \n    fetchData()\n    \n    // 清理函数\n    return () => {\n      isMounted = false\n    }\n  }, [userId])\n  \n  if (loading) return \u003Cp>加载中...\u003C/p>\n  if (error) return \u003Cp>错误: {error.message}\u003C/p>\n  \n  return \u003Cdiv>{data && JSON.stringify(data)}\u003C/div>\n}\n",[685],{"type":27,"tag":670,"props":686,"children":687},{"__ignoreMap":7},[688],{"type":32,"value":683},{"type":27,"tag":655,"props":690,"children":692},{"id":691},"usecontext-跨组件通信",[693],{"type":32,"value":694},"useContext - 跨组件通信",{"type":27,"tag":662,"props":696,"children":699},{"className":697,"code":698,"language":667,"meta":7},[665],"import { createContext, useContext, useState } from 'react'\n\n// 创建上下文\nconst ThemeContext = createContext()\n\n// 提供者组件\nfunction ThemeProvider({ children }) {\n  const [theme, setTheme] = useState('light')\n  \n  const toggleTheme = () => {\n    setTheme(prev => prev === 'light' ? 'dark' : 'light')\n  }\n  \n  const value = { theme, toggleTheme }\n  \n  return (\n    \u003CThemeContext.Provider value={value}>\n      {children}\n    \u003C/ThemeContext.Provider>\n  )\n}\n\n// 使用 Hook\nfunction useTheme() {\n  const context = useContext(ThemeContext)\n  \n  if (!context) {\n    throw new Error('useTheme 必须在 ThemeProvider 内使用')\n  }\n  \n  return context\n}\n\n// 组件使用\nfunction App() {\n  const { theme, toggleTheme } = useTheme()\n  \n  return (\n    \u003Cdiv style={{\n      background: theme === 'light' ? '#fff' : '#333',\n      color: theme === 'light' ? '#000' : '#fff',\n    }}>\n      \u003Cp>当前主题: {theme}\u003C/p>\n      \u003Cbutton onClick={toggleTheme}>切换主题\u003C/button>\n    \u003C/div>\n  )\n}\n\n// 使用\nexport default function Root() {\n  return (\n    \u003CThemeProvider>\n      \u003CApp />\n    \u003C/ThemeProvider>\n  )\n}\n",[700],{"type":27,"tag":670,"props":701,"children":702},{"__ignoreMap":7},[703],{"type":32,"value":698},{"type":27,"tag":75,"props":705,"children":707},{"id":706},"自定义-hooks",[708],{"type":32,"value":709},"自定义 Hooks",{"type":27,"tag":655,"props":711,"children":713},{"id":712},"uselocalstorage",[714],{"type":32,"value":715},"useLocalStorage",{"type":27,"tag":662,"props":717,"children":720},{"className":718,"code":719,"language":667,"meta":7},[665],"import { useState, useEffect } from 'react'\n\nfunction useLocalStorage(key, initialValue) {\n  // 从本地存储获取初始值\n  const [storedValue, setStoredValue] = useState(() => {\n    try {\n      const item = window.localStorage.getItem(key)\n      return item ? JSON.parse(item) : initialValue\n    } catch (error) {\n      console.error(error)\n      return initialValue\n    }\n  })\n  \n  // 当值改变时更新本地存储\n  const setValue = (value) => {\n    try {\n      const valueToStore = value instanceof Function ? value(storedValue) : value\n      setStoredValue(valueToStore)\n      window.localStorage.setItem(key, JSON.stringify(valueToStore))\n    } catch (error) {\n      console.error(error)\n    }\n  }\n  \n  return [storedValue, setValue]\n}\n\n// 使用\nfunction App() {\n  const [name, setName] = useLocalStorage('name', 'Guest')\n  \n  return (\n    \u003Cdiv>\n      \u003Cp>姓名: {name}\u003C/p>\n      \u003Cinput\n        value={name}\n        onChange={(e) => setName(e.target.value)}\n      />\n    \u003C/div>\n  )\n}\n",[721],{"type":27,"tag":670,"props":722,"children":723},{"__ignoreMap":7},[724],{"type":32,"value":719},{"type":27,"tag":655,"props":726,"children":728},{"id":727},"useasync-异步操作",[729],{"type":32,"value":730},"useAsync - 异步操作",{"type":27,"tag":662,"props":732,"children":735},{"className":733,"code":734,"language":667,"meta":7},[665],"import { useState, useEffect, useRef } from 'react'\n\nfunction useAsync(asyncFunction, immediate = true) {\n  const [status, setStatus] = useState('idle')\n  const [value, setValue] = useState(null)\n  const [error, setError] = useState(null)\n  \n  // 使用 ref 来防止无限循环\n  const executeRef = useRef(null)\n  \n  const execute = useRef(async () => {\n    setStatus('pending')\n    setValue(null)\n    setError(null)\n    \n    try {\n      const response = await asyncFunction()\n      setValue(response)\n      setStatus('success')\n      return response\n    } catch (error) {\n      setError(error)\n      setStatus('error')\n    }\n  })\n  \n  executeRef.current = execute.current\n  \n  useEffect(() => {\n    if (!immediate) return\n    \n    executeRef.current()\n  }, [immediate])\n  \n  return { execute: executeRef.current, status, value, error }\n}\n\n// 使用\nfunction UserProfile({ userId }) {\n  const { execute, status, value: user, error } = useAsync(\n    () => fetch(\\`/api/users/\\${userId}\\`).then(r => r.json()),\n    true\n  )\n  \n  if (status === 'pending') return \u003Cp>加载中...\u003C/p>\n  if (status === 'error') return \u003Cp>错误: {error?.message}\u003C/p>\n  if (status === 'success') return \u003Cp>用户: {user?.name}\u003C/p>\n  \n  return null\n}\n",[736],{"type":27,"tag":670,"props":737,"children":738},{"__ignoreMap":7},[739],{"type":32,"value":734},{"type":27,"tag":655,"props":741,"children":743},{"id":742},"usefetch-数据获取",[744],{"type":32,"value":745},"useFetch - 数据获取",{"type":27,"tag":662,"props":747,"children":750},{"className":748,"code":749,"language":667,"meta":7},[665],"import { useState, useEffect } from 'react'\n\nfunction useFetch(url, options = {}) {\n  const [data, setData] = useState(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState(null)\n  \n  useEffect(() => {\n    let isMounted = true\n    \n    const fetchData = async () => {\n      try {\n        const response = await fetch(url, {\n          method: 'GET',\n          ...options,\n        })\n        \n        if (!response.ok) {\n          throw new Error(\\`HTTP error! status: \\${response.status}\\`)\n        }\n        \n        const result = await response.json()\n        \n        if (isMounted) {\n          setData(result)\n          setError(null)\n        }\n      } catch (err) {\n        if (isMounted) {\n          setError(err)\n          setData(null)\n        }\n      } finally {\n        if (isMounted) {\n          setLoading(false)\n        }\n      }\n    }\n    \n    fetchData()\n    \n    return () => {\n      isMounted = false\n    }\n  }, [url, options])\n  \n  const refetch = async () => {\n    setLoading(true)\n    try {\n      const response = await fetch(url, options)\n      const result = await response.json()\n      setData(result)\n    } catch (err) {\n      setError(err)\n    } finally {\n      setLoading(false)\n    }\n  }\n  \n  return { data, loading, error, refetch }\n}\n\n// 使用\nfunction UserList() {\n  const { data: users, loading, error, refetch } = useFetch('/api/users')\n  \n  if (loading) return \u003Cp>加载中...\u003C/p>\n  if (error) return \u003Cp>错误: {error.message}\u003C/p>\n  \n  return (\n    \u003Cdiv>\n      \u003Cbutton onClick={refetch}>刷新\u003C/button>\n      \u003Cul>\n        {users?.map(user => (\n          \u003Cli key={user.id}>{user.name}\u003C/li>\n        ))}\n      \u003C/ul>\n    \u003C/div>\n  )\n}\n",[751],{"type":27,"tag":670,"props":752,"children":753},{"__ignoreMap":7},[754],{"type":32,"value":749},{"type":27,"tag":655,"props":756,"children":758},{"id":757},"useprevious-保存前一个值",[759],{"type":32,"value":760},"usePrevious - 保存前一个值",{"type":27,"tag":662,"props":762,"children":765},{"className":763,"code":764,"language":667,"meta":7},[665],"import { useEffect, useRef } from 'react'\n\nfunction usePrevious(value) {\n  const ref = useRef()\n  \n  useEffect(() => {\n    ref.current = value\n  }, [value])\n  \n  return ref.current\n}\n\n// 使用\nfunction Counter() {\n  const [count, setCount] = React.useState(0)\n  const prevCount = usePrevious(count)\n  \n  return (\n    \u003Cdiv>\n      \u003Cp>当前: {count}, 前一个: {prevCount}\u003C/p>\n      \u003Cbutton onClick={() => setCount(count + 1)}>增加\u003C/button>\n    \u003C/div>\n  )\n}\n",[766],{"type":27,"tag":670,"props":767,"children":768},{"__ignoreMap":7},[769],{"type":32,"value":764},{"type":27,"tag":75,"props":771,"children":773},{"id":772},"高级模式",[774],{"type":32,"value":772},{"type":27,"tag":655,"props":776,"children":778},{"id":777},"usereducer-复杂状态管理",[779],{"type":32,"value":780},"useReducer - 复杂状态管理",{"type":27,"tag":662,"props":782,"children":785},{"className":783,"code":784,"language":667,"meta":7},[665],"import { useReducer } from 'react'\n\nconst initialState = {\n  todos: [],\n  filter: 'all',\n  error: null,\n}\n\nfunction todoReducer(state, action) {\n  switch (action.type) {\n    case 'ADD_TODO':\n      return {\n        ...state,\n        todos: [...state.todos, { id: Date.now(), text: action.payload }],\n      }\n    \n    case 'REMOVE_TODO':\n      return {\n        ...state,\n        todos: state.todos.filter(todo => todo.id !== action.payload),\n      }\n    \n    case 'SET_FILTER':\n      return { ...state, filter: action.payload }\n    \n    case 'SET_ERROR':\n      return { ...state, error: action.payload }\n    \n    default:\n      return state\n  }\n}\n\nfunction TodoApp() {\n  const [state, dispatch] = useReducer(todoReducer, initialState)\n  \n  const addTodo = (text) => {\n    dispatch({ type: 'ADD_TODO', payload: text })\n  }\n  \n  const removeTodo = (id) => {\n    dispatch({ type: 'REMOVE_TODO', payload: id })\n  }\n  \n  return (\n    \u003Cdiv>\n      {state.todos.map(todo => (\n        \u003Cdiv key={todo.id}>\n          {todo.text}\n          \u003Cbutton onClick={() => removeTodo(todo.id)}>删除\u003C/button>\n        \u003C/div>\n      ))}\n    \u003C/div>\n  )\n}\n",[786],{"type":27,"tag":670,"props":787,"children":788},{"__ignoreMap":7},[789],{"type":32,"value":784},{"type":27,"tag":75,"props":791,"children":793},{"id":792},"最佳实践",[794],{"type":32,"value":792},{"type":27,"tag":28,"props":796,"children":797},{},[798,800,806],{"type":32,"value":799},"✅ ",{"type":27,"tag":801,"props":802,"children":803},"strong",{},[804],{"type":32,"value":805},"应该做的事",{"type":32,"value":807},":",{"type":27,"tag":40,"props":809,"children":810},{},[811,816,821,826,831],{"type":27,"tag":44,"props":812,"children":813},{},[814],{"type":32,"value":815},"将相关逻辑提取到自定义 Hooks",{"type":27,"tag":44,"props":817,"children":818},{},[819],{"type":32,"value":820},"在 useEffect 的依赖数组中包含所有依赖",{"type":27,"tag":44,"props":822,"children":823},{},[824],{"type":32,"value":825},"使用 useCallback 和 useMemo 优化性能",{"type":27,"tag":44,"props":827,"children":828},{},[829],{"type":32,"value":830},"为自定义 Hooks 编写文档",{"type":27,"tag":44,"props":832,"children":833},{},[834],{"type":32,"value":835},"及时清理副作用",{"type":27,"tag":28,"props":837,"children":838},{},[839,841,846],{"type":32,"value":840},"❌ ",{"type":27,"tag":801,"props":842,"children":843},{},[844],{"type":32,"value":845},"不应该做的事",{"type":32,"value":807},{"type":27,"tag":40,"props":848,"children":849},{},[850,855,860,865,870],{"type":27,"tag":44,"props":851,"children":852},{},[853],{"type":32,"value":854},"在条件或循环中调用 Hooks",{"type":27,"tag":44,"props":856,"children":857},{},[858],{"type":32,"value":859},"在普通函数中调用 Hooks",{"type":27,"tag":44,"props":861,"children":862},{},[863],{"type":32,"value":864},"忘记依赖数组",{"type":27,"tag":44,"props":866,"children":867},{},[868],{"type":32,"value":869},"过度使用 useMemo/useCallback",{"type":27,"tag":44,"props":871,"children":872},{},[873],{"type":32,"value":874},"在 Hooks 中创建过多的闭包",{"type":27,"tag":75,"props":876,"children":878},{"id":877},"检查清单",[879],{"type":32,"value":877},{"type":27,"tag":40,"props":881,"children":884},{"className":882},[883],"contains-task-list",[885,898,907,916,925],{"type":27,"tag":44,"props":886,"children":889},{"className":887},[888],"task-list-item",[890,896],{"type":27,"tag":891,"props":892,"children":895},"input",{"disabled":893,"type":894},true,"checkbox",[],{"type":32,"value":897}," Hooks 调用顺序正确",{"type":27,"tag":44,"props":899,"children":901},{"className":900},[888],[902,905],{"type":27,"tag":891,"props":903,"children":904},{"disabled":893,"type":894},[],{"type":32,"value":906}," 依赖数组完整",{"type":27,"tag":44,"props":908,"children":910},{"className":909},[888],[911,914],{"type":27,"tag":891,"props":912,"children":913},{"disabled":893,"type":894},[],{"type":32,"value":915}," 副作用正确清理",{"type":27,"tag":44,"props":917,"children":919},{"className":918},[888],[920,923],{"type":27,"tag":891,"props":921,"children":922},{"disabled":893,"type":894},[],{"type":32,"value":924}," 性能优化得当",{"type":27,"tag":44,"props":926,"children":928},{"className":927},[888],[929,932],{"type":27,"tag":891,"props":930,"children":931},{"disabled":893,"type":894},[],{"type":32,"value":933}," 代码易于理解和测试",{"title":7,"searchDepth":603,"depth":603,"links":935},[936,937,942,948,951,952],{"id":640,"depth":606,"text":624},{"id":650,"depth":606,"text":653,"children":938},[939,940,941],{"id":657,"depth":603,"text":660},{"id":676,"depth":603,"text":679},{"id":691,"depth":603,"text":694},{"id":706,"depth":606,"text":709,"children":943},[944,945,946,947],{"id":712,"depth":603,"text":715},{"id":727,"depth":603,"text":730},{"id":742,"depth":603,"text":745},{"id":757,"depth":603,"text":760},{"id":772,"depth":606,"text":772,"children":949},[950],{"id":777,"depth":603,"text":780},{"id":792,"depth":606,"text":792},{"id":877,"depth":606,"text":877},"content:topics:frontend:react-hooks-guide.md","topics/frontend/react-hooks-guide.md","topics/frontend/react-hooks-guide",{"_path":957,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":958,"description":959,"keywords":960,"image":966,"author":633,"date":634,"readingTime":967,"topic":5,"body":968,"_type":615,"_id":1265,"_source":617,"_file":1266,"_stem":1267,"_extension":620},"/topics/frontend/vue3-composition-api","Vue 3 Composition API 深度解析","全面讲解 Vue 3 Composition API 的用法、最佳实践和高级模式",[961,962,963,964,965],"Vue 3","Composition API","组合式函数","响应式系统","前端开发","/images/topics/vue3-composition-api.jpg",22,{"type":24,"children":969,"toc":1241},[970,975,980,985,991,1000,1005,1014,1018,1023,1032,1037,1043,1052,1057,1063,1072,1077,1082,1091,1096,1102,1111,1115,1124,1152,1161,1189,1193],{"type":27,"tag":75,"props":971,"children":973},{"id":972},"vue-3-composition-api-深度解析",[974],{"type":32,"value":958},{"type":27,"tag":28,"props":976,"children":977},{},[978],{"type":32,"value":979},"Composition API 让 Vue 应用更易于组织和重用逻辑。本文深入讲解这一核心特性。",{"type":27,"tag":75,"props":981,"children":983},{"id":982},"核心概念",[984],{"type":32,"value":982},{"type":27,"tag":655,"props":986,"children":988},{"id":987},"setup-函数",[989],{"type":32,"value":990},"setup 函数",{"type":27,"tag":662,"props":992,"children":995},{"className":993,"code":994,"language":667,"meta":7},[665],"import { ref, computed, watch } from 'vue'\n\nexport default {\n  props: ['initialCount'],\n  emits: ['count-changed'],\n  \n  setup(props, { emit, slots, expose }) {\n    // 创建响应式状态\n    const count = ref(props.initialCount)\n    const doubled = computed(() => count.value * 2)\n    \n    // 监听状态变化\n    watch(count, (newVal, oldVal) => {\n      console.log(`Count changed from ${oldVal} to ${newVal}`)\n      emit('count-changed', newVal)\n    })\n    \n    // 定义方法\n    const increment = () => count.value++\n    const decrement = () => count.value--\n    \n    // 返回模板需要的内容\n    return {\n      count,\n      doubled,\n      increment,\n      decrement,\n    }\n  },\n}\n",[996],{"type":27,"tag":670,"props":997,"children":998},{"__ignoreMap":7},[999],{"type":32,"value":994},{"type":27,"tag":655,"props":1001,"children":1003},{"id":1002},"响应式基础",[1004],{"type":32,"value":1002},{"type":27,"tag":662,"props":1006,"children":1009},{"className":1007,"code":1008,"language":667,"meta":7},[665],"import { ref, reactive, readonly, isRef } from 'vue'\n\n// ref - 用于基本类型\nconst count = ref(0)\nconsole.log(count.value) // 0\ncount.value++\n\n// reactive - 用于对象\nconst state = reactive({\n  name: 'John',\n  age: 30,\n  address: {\n    city: 'Beijing',\n  },\n})\n\nstate.name = 'Jane' // 自动更新，无需 .value\n\n// readonly - 创建只读副本\nconst original = reactive({ count: 0 })\nconst copy = readonly(original)\n// copy.count++ // 错误：不能修改\n\n// isRef 检查\nconsole.log(isRef(count)) // true\nconsole.log(isRef(state)) // false\n",[1010],{"type":27,"tag":670,"props":1011,"children":1012},{"__ignoreMap":7},[1013],{"type":32,"value":1008},{"type":27,"tag":75,"props":1015,"children":1016},{"id":963},[1017],{"type":32,"value":963},{"type":27,"tag":655,"props":1019,"children":1021},{"id":1020},"创建可重用逻辑",[1022],{"type":32,"value":1020},{"type":27,"tag":662,"props":1024,"children":1027},{"className":1025,"code":1026,"language":667,"meta":7},[665],"// useCounter.js - 组合式函数\nimport { ref, computed } from 'vue'\n\nexport function useCounter(initialValue = 0) {\n  const count = ref(initialValue)\n  const doubled = computed(() => count.value * 2)\n  \n  const increment = () => count.value++\n  const decrement = () => count.value--\n  const reset = () => count.value = initialValue\n  \n  return {\n    count,\n    doubled,\n    increment,\n    decrement,\n    reset,\n  }\n}\n\n// useFetch.js - 数据获取组合式函数\nimport { ref, onMounted } from 'vue'\n\nexport function useFetch(url) {\n  const data = ref(null)\n  const loading = ref(false)\n  const error = ref(null)\n  \n  const fetch = async () => {\n    loading.value = true\n    error.value = null\n    \n    try {\n      const response = await fetch(url)\n      data.value = await response.json()\n    } catch (e) {\n      error.value = e\n    } finally {\n      loading.value = false\n    }\n  }\n  \n  onMounted(fetch)\n  \n  return {\n    data,\n    loading,\n    error,\n    refetch: fetch,\n  }\n}\n\n// 使用\nexport default {\n  setup() {\n    const { count, doubled, increment } = useCounter(10)\n    const { data, loading, refetch } = useFetch('/api/data')\n    \n    return {\n      count,\n      doubled,\n      increment,\n      data,\n      loading,\n      refetch,\n    }\n  },\n}\n",[1028],{"type":27,"tag":670,"props":1029,"children":1030},{"__ignoreMap":7},[1031],{"type":32,"value":1026},{"type":27,"tag":75,"props":1033,"children":1035},{"id":1034},"生命周期钩子",[1036],{"type":32,"value":1034},{"type":27,"tag":655,"props":1038,"children":1040},{"id":1039},"composition-api-中的生命周期",[1041],{"type":32,"value":1042},"Composition API 中的生命周期",{"type":27,"tag":662,"props":1044,"children":1047},{"className":1045,"code":1046,"language":667,"meta":7},[665],"import {\n  onBeforeMount,\n  onMounted,\n  onBeforeUpdate,\n  onUpdated,\n  onBeforeUnmount,\n  onUnmounted,\n  onErrorCaptured,\n} from 'vue'\n\nexport default {\n  setup() {\n    onBeforeMount(() => {\n      console.log('组件挂载前')\n    })\n    \n    onMounted(() => {\n      console.log('组件已挂载')\n      // 初始化事件监听器、定时器等\n    })\n    \n    onBeforeUpdate(() => {\n      console.log('组件更新前')\n    })\n    \n    onUpdated(() => {\n      console.log('组件已更新')\n    })\n    \n    onBeforeUnmount(() => {\n      console.log('组件卸载前')\n    })\n    \n    onUnmounted(() => {\n      console.log('组件已卸载')\n      // 清理事件监听器、定时器等\n    })\n    \n    onErrorCaptured((err, instance, info) => {\n      console.log('捕获错误:', err)\n      return false // 返回 false 阻止错误传播\n    })\n    \n    return {}\n  },\n}\n",[1048],{"type":27,"tag":670,"props":1049,"children":1050},{"__ignoreMap":7},[1051],{"type":32,"value":1046},{"type":27,"tag":75,"props":1053,"children":1055},{"id":1054},"模板引用",[1056],{"type":32,"value":1054},{"type":27,"tag":655,"props":1058,"children":1060},{"id":1059},"访问-dom-元素",[1061],{"type":32,"value":1062},"访问 DOM 元素",{"type":27,"tag":662,"props":1064,"children":1067},{"className":1065,"code":1066,"language":667,"meta":7},[665],"import { ref, onMounted } from 'vue'\n\nexport default {\n  setup() {\n    const inputRef = ref(null)\n    const listRef = ref(null)\n    const dynamicRef = ref(null)\n    \n    onMounted(() => {\n      // 访问 DOM 元素\n      inputRef.value?.focus()\n      console.log(listRef.value?.offsetHeight)\n    })\n    \n    // 函数式引用\n    const assignRef = el => {\n      if (el) {\n        console.log('元素已赋值', el)\n      } else {\n        console.log('元素已移除')\n      }\n    }\n    \n    return {\n      inputRef,\n      listRef,\n      dynamicRef,\n      assignRef,\n    }\n  },\n  \n  template: \\`\n    \u003Cdiv>\n      \u003Cinput ref=\"inputRef\" />\n      \u003Cul ref=\"listRef\">\n        \u003Cli v-for=\"item in items\" :key=\"item\">{{ item }}\u003C/li>\n      \u003C/ul>\n      \u003Cdiv :ref=\"assignRef\">\u003C/div>\n    \u003C/div>\n  \\`,\n}\n",[1068],{"type":27,"tag":670,"props":1069,"children":1070},{"__ignoreMap":7},[1071],{"type":32,"value":1066},{"type":27,"tag":75,"props":1073,"children":1075},{"id":1074},"依赖注入",[1076],{"type":32,"value":1074},{"type":27,"tag":655,"props":1078,"children":1080},{"id":1079},"跨组件共享数据",[1081],{"type":32,"value":1079},{"type":27,"tag":662,"props":1083,"children":1086},{"className":1084,"code":1085,"language":667,"meta":7},[665],"import { provide, inject, ref, readonly } from 'vue'\n\n// 父组件\nexport default {\n  setup() {\n    const theme = ref('light')\n    const user = ref({ name: 'John', role: 'admin' })\n    \n    // 提供数据给子组件\n    provide('theme', readonly(theme))\n    provide('updateTheme', (newTheme) => {\n      theme.value = newTheme\n    })\n    \n    // 使用 Symbol 作为 key 避免命名冲突\n    const userKey = Symbol()\n    provide(userKey, readonly(user))\n    \n    return {\n      theme,\n      updateTheme: (newTheme) => {\n        theme.value = newTheme\n      },\n    }\n  },\n}\n\n// 子组件\nexport default {\n  setup() {\n    // 注入数据\n    const theme = inject('theme')\n    const updateTheme = inject('updateTheme')\n    const user = inject(Symbol.for('user'))\n    \n    // 带默认值的注入\n    const config = inject('config', {\n      apiUrl: 'http://localhost:3000',\n    })\n    \n    return {\n      theme,\n      updateTheme,\n      user,\n      config,\n    }\n  },\n}\n",[1087],{"type":27,"tag":670,"props":1088,"children":1089},{"__ignoreMap":7},[1090],{"type":32,"value":1085},{"type":27,"tag":75,"props":1092,"children":1094},{"id":1093},"高级状态管理",[1095],{"type":32,"value":1093},{"type":27,"tag":655,"props":1097,"children":1099},{"id":1098},"创建小型-store",[1100],{"type":32,"value":1101},"创建小型 store",{"type":27,"tag":662,"props":1103,"children":1106},{"className":1104,"code":1105,"language":667,"meta":7},[665],"import { reactive, readonly, computed } from 'vue'\n\n// store.js - 不依赖 Pinia 的简单 store\nexport function createStore() {\n  const state = reactive({\n    items: [],\n    filter: 'all',\n    sortBy: 'date',\n  })\n  \n  const filteredItems = computed(() => {\n    let result = state.items\n    \n    if (state.filter !== 'all') {\n      result = result.filter(item => item.status === state.filter)\n    }\n    \n    if (state.sortBy === 'date') {\n      result.sort((a, b) => new Date(b.date) - new Date(a.date))\n    } else if (state.sortBy === 'name') {\n      result.sort((a, b) => a.name.localeCompare(b.name))\n    }\n    \n    return result\n  })\n  \n  const actions = {\n    addItem(item) {\n      state.items.push({ ...item, id: Date.now() })\n    },\n    \n    removeItem(id) {\n      state.items = state.items.filter(item => item.id !== id)\n    },\n    \n    updateItem(id, updates) {\n      const item = state.items.find(item => item.id === id)\n      if (item) {\n        Object.assign(item, updates)\n      }\n    },\n    \n    setFilter(filter) {\n      state.filter = filter\n    },\n    \n    setSortBy(sortBy) {\n      state.sortBy = sortBy\n    },\n  }\n  \n  return {\n    state: readonly(state),\n    filteredItems,\n    ...actions,\n  }\n}\n\n// 使用\nexport default {\n  setup() {\n    const store = createStore()\n    \n    const handleAdd = (item) => {\n      store.addItem(item)\n    }\n    \n    return {\n      items: store.filteredItems,\n      addItem: handleAdd,\n      setFilter: store.setFilter,\n    }\n  },\n}\n",[1107],{"type":27,"tag":670,"props":1108,"children":1109},{"__ignoreMap":7},[1110],{"type":32,"value":1105},{"type":27,"tag":75,"props":1112,"children":1113},{"id":792},[1114],{"type":32,"value":792},{"type":27,"tag":28,"props":1116,"children":1117},{},[1118,1119,1123],{"type":32,"value":799},{"type":27,"tag":801,"props":1120,"children":1121},{},[1122],{"type":32,"value":805},{"type":32,"value":807},{"type":27,"tag":40,"props":1125,"children":1126},{},[1127,1132,1137,1142,1147],{"type":27,"tag":44,"props":1128,"children":1129},{},[1130],{"type":32,"value":1131},"将相关逻辑组织在一起",{"type":27,"tag":44,"props":1133,"children":1134},{},[1135],{"type":32,"value":1136},"创建可重用的组合式函数",{"type":27,"tag":44,"props":1138,"children":1139},{},[1140],{"type":32,"value":1141},"使用 TypeScript 获得更好的类型检查",{"type":27,"tag":44,"props":1143,"children":1144},{},[1145],{"type":32,"value":1146},"合理使用计算属性和监听器",{"type":27,"tag":44,"props":1148,"children":1149},{},[1150],{"type":32,"value":1151},"及时清理事件监听器和定时器",{"type":27,"tag":28,"props":1153,"children":1154},{},[1155,1156,1160],{"type":32,"value":840},{"type":27,"tag":801,"props":1157,"children":1158},{},[1159],{"type":32,"value":845},{"type":32,"value":807},{"type":27,"tag":40,"props":1162,"children":1163},{},[1164,1169,1174,1179,1184],{"type":27,"tag":44,"props":1165,"children":1166},{},[1167],{"type":32,"value":1168},"在 setup 中执行副作用操作（除了生命周期钩子）",{"type":27,"tag":44,"props":1170,"children":1171},{},[1172],{"type":32,"value":1173},"过度使用计算属性",{"type":27,"tag":44,"props":1175,"children":1176},{},[1177],{"type":32,"value":1178},"忘记清理 watch 监听器",{"type":27,"tag":44,"props":1180,"children":1181},{},[1182],{"type":32,"value":1183},"在 reactive 对象中存储引用类型时不谨慎",{"type":27,"tag":44,"props":1185,"children":1186},{},[1187],{"type":32,"value":1188},"过度复杂化组合式函数",{"type":27,"tag":75,"props":1190,"children":1191},{"id":877},[1192],{"type":32,"value":877},{"type":27,"tag":40,"props":1194,"children":1196},{"className":1195},[883],[1197,1206,1215,1224,1233],{"type":27,"tag":44,"props":1198,"children":1200},{"className":1199},[888],[1201,1204],{"type":27,"tag":891,"props":1202,"children":1203},{"disabled":893,"type":894},[],{"type":32,"value":1205}," 正确使用 ref 和 reactive",{"type":27,"tag":44,"props":1207,"children":1209},{"className":1208},[888],[1210,1213],{"type":27,"tag":891,"props":1211,"children":1212},{"disabled":893,"type":894},[],{"type":32,"value":1214}," 生命周期钩子正确",{"type":27,"tag":44,"props":1216,"children":1218},{"className":1217},[888],[1219,1222],{"type":27,"tag":891,"props":1220,"children":1221},{"disabled":893,"type":894},[],{"type":32,"value":1223}," 模板引用工作正常",{"type":27,"tag":44,"props":1225,"children":1227},{"className":1226},[888],[1228,1231],{"type":27,"tag":891,"props":1229,"children":1230},{"disabled":893,"type":894},[],{"type":32,"value":1232}," 组合式函数可重用",{"type":27,"tag":44,"props":1234,"children":1236},{"className":1235},[888],[1237,1240],{"type":27,"tag":891,"props":1238,"children":1239},{"disabled":893,"type":894},[],{"type":32,"value":924},{"title":7,"searchDepth":603,"depth":603,"links":1242},[1243,1244,1248,1251,1254,1257,1260,1263,1264],{"id":972,"depth":606,"text":958},{"id":982,"depth":606,"text":982,"children":1245},[1246,1247],{"id":987,"depth":603,"text":990},{"id":1002,"depth":603,"text":1002},{"id":963,"depth":606,"text":963,"children":1249},[1250],{"id":1020,"depth":603,"text":1020},{"id":1034,"depth":606,"text":1034,"children":1252},[1253],{"id":1039,"depth":603,"text":1042},{"id":1054,"depth":606,"text":1054,"children":1255},[1256],{"id":1059,"depth":603,"text":1062},{"id":1074,"depth":606,"text":1074,"children":1258},[1259],{"id":1079,"depth":603,"text":1079},{"id":1093,"depth":606,"text":1093,"children":1261},[1262],{"id":1098,"depth":603,"text":1101},{"id":792,"depth":606,"text":792},{"id":877,"depth":606,"text":877},"content:topics:frontend:vue3-composition-api.md","topics/frontend/vue3-composition-api.md","topics/frontend/vue3-composition-api",{"_path":1269,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1270,"description":1271,"date":1272,"topic":5,"author":11,"tags":1273,"image":1279,"featured":893,"readingTime":1280,"body":1281,"_type":615,"_id":2543,"_source":617,"_file":2544,"_stem":2545,"_extension":620},"/topics/frontend/rspack-performance-practice","Rspack 构建性能实战","从 Rspack 的架构设计与编译管线出发，系统对比 Webpack/Vite 并给出 Rspack 在大型项目中的迁移路径、性能调优策略与生产级可观测方案。","2026-01-20",[1274,1275,1276,1277,1278],"Rspack","构建工具","性能优化","Webpack","前端工程化","/images/topics/rspack.jpg",25,{"type":24,"children":1282,"toc":2510},[1283,1288,1300,1305,1323,1335,1340,1363,1367,1373,1378,1384,1417,1423,1441,1444,1450,1456,1461,1474,1480,1485,1498,1504,1522,1527,1530,1536,1541,1682,1687,1710,1713,1719,1725,1730,1735,1803,1816,1822,1830,1843,1851,1864,1872,1885,1891,1909,1912,1918,1924,1929,1942,1948,1953,1964,1970,1975,1993,1998,2026,2029,2035,2040,2051,2056,2074,2079,2097,2100,2106,2111,2129,2134,2157,2162,2180,2183,2189,2195,2200,2218,2224,2242,2248,2266,2269,2275,2390,2395,2413,2416,2422,2480,2483,2487,2492],{"type":27,"tag":75,"props":1284,"children":1286},{"id":1285},"rspack-构建性能实战",[1287],{"type":32,"value":1270},{"type":27,"tag":28,"props":1289,"children":1290},{},[1291,1293,1298],{"type":32,"value":1292},"Rspack 不是\"又一个构建工具\"，而是字节跳动在处理",{"type":27,"tag":801,"props":1294,"children":1295},{},[1296],{"type":32,"value":1297},"超大规模前端项目",{"type":32,"value":1299},"时，对 Webpack 生态的 Rust 重写与工程化沉淀。",{"type":27,"tag":28,"props":1301,"children":1302},{},[1303],{"type":32,"value":1304},"它要解决的核心问题是：",{"type":27,"tag":40,"props":1306,"children":1307},{},[1308,1313,1318],{"type":27,"tag":44,"props":1309,"children":1310},{},[1311],{"type":32,"value":1312},"Webpack 的构建速度在大型 monorepo 下（10k+ 模块）已成为开发体验瓶颈",{"type":27,"tag":44,"props":1314,"children":1315},{},[1316],{"type":32,"value":1317},"但你又无法抛弃 Webpack 的插件生态与配置范式",{"type":27,"tag":44,"props":1319,"children":1320},{},[1321],{"type":32,"value":1322},"Vite 虽然快，但在某些场景（大型遗留项目、特定插件依赖）迁移成本高",{"type":27,"tag":28,"props":1324,"children":1325},{},[1326,1328,1333],{"type":32,"value":1327},"Rspack 的定位是：",{"type":27,"tag":801,"props":1329,"children":1330},{},[1331],{"type":32,"value":1332},"Webpack 兼容 API + Rust 性能 + 生产级稳定性",{"type":32,"value":1334},"。",{"type":27,"tag":28,"props":1336,"children":1337},{},[1338],{"type":32,"value":1339},"这篇文章不讲\"Hello World\"，而是按\"你要在生产上稳定用 Rspack\"的标准，给出：",{"type":27,"tag":40,"props":1341,"children":1342},{},[1343,1348,1353,1358],{"type":27,"tag":44,"props":1344,"children":1345},{},[1346],{"type":32,"value":1347},"性能收益的真实量化方法",{"type":27,"tag":44,"props":1349,"children":1350},{},[1351],{"type":32,"value":1352},"迁移路径与兼容性边界",{"type":27,"tag":44,"props":1354,"children":1355},{},[1356],{"type":32,"value":1357},"优化策略（缓存、并行、Tree Shaking）",{"type":27,"tag":44,"props":1359,"children":1360},{},[1361],{"type":32,"value":1362},"监控与排障（为什么变慢、为什么产物变大）",{"type":27,"tag":1364,"props":1365,"children":1366},"hr",{},[],{"type":27,"tag":75,"props":1368,"children":1370},{"id":1369},"_1-先回答什么项目值得迁移-rspack",[1371],{"type":32,"value":1372},"1. 先回答：什么项目值得迁移 Rspack？",{"type":27,"tag":28,"props":1374,"children":1375},{},[1376],{"type":32,"value":1377},"不是所有项目都需要 Rspack。",{"type":27,"tag":655,"props":1379,"children":1381},{"id":1380},"_11-高收益场景",[1382],{"type":32,"value":1383},"1.1 高收益场景",{"type":27,"tag":40,"props":1385,"children":1386},{},[1387,1397,1407],{"type":27,"tag":44,"props":1388,"children":1389},{},[1390,1395],{"type":27,"tag":801,"props":1391,"children":1392},{},[1393],{"type":32,"value":1394},"大型 monorepo",{"type":32,"value":1396},"（5k+ 模块，构建时间 > 2 分钟）",{"type":27,"tag":44,"props":1398,"children":1399},{},[1400,1405],{"type":27,"tag":801,"props":1401,"children":1402},{},[1403],{"type":32,"value":1404},"频繁开发迭代",{"type":32,"value":1406},"（HMR 延迟影响体验）",{"type":27,"tag":44,"props":1408,"children":1409},{},[1410,1415],{"type":27,"tag":801,"props":1411,"children":1412},{},[1413],{"type":32,"value":1414},"CI 构建成本高",{"type":32,"value":1416},"（每次 PR 构建超 10 分钟）",{"type":27,"tag":655,"props":1418,"children":1420},{"id":1419},"_12-收益不明显的场景",[1421],{"type":32,"value":1422},"1.2 收益不明显的场景",{"type":27,"tag":40,"props":1424,"children":1425},{},[1426,1431,1436],{"type":27,"tag":44,"props":1427,"children":1428},{},[1429],{"type":32,"value":1430},"小型项目（\u003C 1k 模块）",{"type":27,"tag":44,"props":1432,"children":1433},{},[1434],{"type":32,"value":1435},"已经用 Vite 且体验良好",{"type":27,"tag":44,"props":1437,"children":1438},{},[1439],{"type":32,"value":1440},"高度定制的 Webpack 插件（迁移成本 > 性能收益）",{"type":27,"tag":1364,"props":1442,"children":1443},{},[],{"type":27,"tag":75,"props":1445,"children":1447},{"id":1446},"_2-rspack-的架构为什么能快",[1448],{"type":32,"value":1449},"2. Rspack 的架构：为什么能快？",{"type":27,"tag":655,"props":1451,"children":1453},{"id":1452},"_21-rust-并行编译",[1454],{"type":32,"value":1455},"2.1 Rust 并行编译",{"type":27,"tag":28,"props":1457,"children":1458},{},[1459],{"type":32,"value":1460},"Webpack 是单线程 JavaScript，Rspack 是多线程 Rust。",{"type":27,"tag":40,"props":1462,"children":1463},{},[1464,1469],{"type":27,"tag":44,"props":1465,"children":1466},{},[1467],{"type":32,"value":1468},"模块解析、编译、优化可并行",{"type":27,"tag":44,"props":1470,"children":1471},{},[1472],{"type":32,"value":1473},"I/O 密集型任务（读文件、写产物）异步化",{"type":27,"tag":655,"props":1475,"children":1477},{"id":1476},"_22-更激进的缓存策略",[1478],{"type":32,"value":1479},"2.2 更激进的缓存策略",{"type":27,"tag":28,"props":1481,"children":1482},{},[1483],{"type":32,"value":1484},"Rspack 内置持久化缓存：",{"type":27,"tag":40,"props":1486,"children":1487},{},[1488,1493],{"type":27,"tag":44,"props":1489,"children":1490},{},[1491],{"type":32,"value":1492},"模块级别缓存（类似 Webpack 5 的 cache.type: 'filesystem'）",{"type":27,"tag":44,"props":1494,"children":1495},{},[1496],{"type":32,"value":1497},"但实现更激进：对未变化模块跳过编译",{"type":27,"tag":655,"props":1499,"children":1501},{"id":1500},"_23-内置常用功能减少插件开销",[1502],{"type":32,"value":1503},"2.3 内置常用功能（减少插件开销）",{"type":27,"tag":40,"props":1505,"children":1506},{},[1507,1512,1517],{"type":27,"tag":44,"props":1508,"children":1509},{},[1510],{"type":32,"value":1511},"SWC 替代 Babel（内置 TS/JSX/装饰器）",{"type":27,"tag":44,"props":1513,"children":1514},{},[1515],{"type":32,"value":1516},"CSS Modules、PostCSS 内置",{"type":27,"tag":44,"props":1518,"children":1519},{},[1520],{"type":32,"value":1521},"Tree Shaking 内置",{"type":27,"tag":28,"props":1523,"children":1524},{},[1525],{"type":32,"value":1526},"这让 Rspack 在相同功能下比 Webpack + 插件链路更快。",{"type":27,"tag":1364,"props":1528,"children":1529},{},[],{"type":27,"tag":75,"props":1531,"children":1533},{"id":1532},"_3-性能对比真实场景的量化",[1534],{"type":32,"value":1535},"3. 性能对比：真实场景的量化",{"type":27,"tag":28,"props":1537,"children":1538},{},[1539],{"type":32,"value":1540},"我们用一个典型中型项目（3k 模块，React + TS + CSS Modules）做对比：",{"type":27,"tag":1542,"props":1543,"children":1544},"table",{},[1545,1573],{"type":27,"tag":1546,"props":1547,"children":1548},"thead",{},[1549],{"type":27,"tag":1550,"props":1551,"children":1552},"tr",{},[1553,1559,1564,1568],{"type":27,"tag":1554,"props":1555,"children":1556},"th",{},[1557],{"type":32,"value":1558},"指标",{"type":27,"tag":1554,"props":1560,"children":1561},{},[1562],{"type":32,"value":1563},"Webpack 5",{"type":27,"tag":1554,"props":1565,"children":1566},{},[1567],{"type":32,"value":1274},{"type":27,"tag":1554,"props":1569,"children":1570},{},[1571],{"type":32,"value":1572},"提升",{"type":27,"tag":1574,"props":1575,"children":1576},"tbody",{},[1577,1604,1630,1656],{"type":27,"tag":1550,"props":1578,"children":1579},{},[1580,1586,1591,1596],{"type":27,"tag":1581,"props":1582,"children":1583},"td",{},[1584],{"type":32,"value":1585},"冷启动",{"type":27,"tag":1581,"props":1587,"children":1588},{},[1589],{"type":32,"value":1590},"42s",{"type":27,"tag":1581,"props":1592,"children":1593},{},[1594],{"type":32,"value":1595},"8s",{"type":27,"tag":1581,"props":1597,"children":1598},{},[1599],{"type":27,"tag":801,"props":1600,"children":1601},{},[1602],{"type":32,"value":1603},"5.2x",{"type":27,"tag":1550,"props":1605,"children":1606},{},[1607,1612,1617,1622],{"type":27,"tag":1581,"props":1608,"children":1609},{},[1610],{"type":32,"value":1611},"HMR（热更新）",{"type":27,"tag":1581,"props":1613,"children":1614},{},[1615],{"type":32,"value":1616},"1.2s",{"type":27,"tag":1581,"props":1618,"children":1619},{},[1620],{"type":32,"value":1621},"0.15s",{"type":27,"tag":1581,"props":1623,"children":1624},{},[1625],{"type":27,"tag":801,"props":1626,"children":1627},{},[1628],{"type":32,"value":1629},"8x",{"type":27,"tag":1550,"props":1631,"children":1632},{},[1633,1638,1643,1648],{"type":27,"tag":1581,"props":1634,"children":1635},{},[1636],{"type":32,"value":1637},"生产构建",{"type":27,"tag":1581,"props":1639,"children":1640},{},[1641],{"type":32,"value":1642},"125s",{"type":27,"tag":1581,"props":1644,"children":1645},{},[1646],{"type":32,"value":1647},"28s",{"type":27,"tag":1581,"props":1649,"children":1650},{},[1651],{"type":27,"tag":801,"props":1652,"children":1653},{},[1654],{"type":32,"value":1655},"4.5x",{"type":27,"tag":1550,"props":1657,"children":1658},{},[1659,1664,1669,1674],{"type":27,"tag":1581,"props":1660,"children":1661},{},[1662],{"type":32,"value":1663},"内存峰值",{"type":27,"tag":1581,"props":1665,"children":1666},{},[1667],{"type":32,"value":1668},"1.8GB",{"type":27,"tag":1581,"props":1670,"children":1671},{},[1672],{"type":32,"value":1673},"0.9GB",{"type":27,"tag":1581,"props":1675,"children":1676},{},[1677],{"type":27,"tag":801,"props":1678,"children":1679},{},[1680],{"type":32,"value":1681},"2x",{"type":27,"tag":28,"props":1683,"children":1684},{},[1685],{"type":32,"value":1686},"关键收益：",{"type":27,"tag":40,"props":1688,"children":1689},{},[1690,1700],{"type":27,"tag":44,"props":1691,"children":1692},{},[1693,1698],{"type":27,"tag":801,"props":1694,"children":1695},{},[1696],{"type":32,"value":1697},"开发体验质变",{"type":32,"value":1699},"（HMR \u003C 200ms）",{"type":27,"tag":44,"props":1701,"children":1702},{},[1703,1708],{"type":27,"tag":801,"props":1704,"children":1705},{},[1706],{"type":32,"value":1707},"CI 成本减半",{"type":32,"value":1709},"（构建时间直接影响 Runner 费用）",{"type":27,"tag":1364,"props":1711,"children":1712},{},[],{"type":27,"tag":75,"props":1714,"children":1716},{"id":1715},"_4-迁移路径从-webpack-到-rspack",[1717],{"type":32,"value":1718},"4. 迁移路径：从 Webpack 到 Rspack",{"type":27,"tag":655,"props":1720,"children":1722},{"id":1721},"_41-最小迁移保守策略",[1723],{"type":32,"value":1724},"4.1 最小迁移（保守策略）",{"type":27,"tag":28,"props":1726,"children":1727},{},[1728],{"type":32,"value":1729},"目标：用最小改动换取性能收益。",{"type":27,"tag":28,"props":1731,"children":1732},{},[1733],{"type":32,"value":1734},"步骤：",{"type":27,"tag":1736,"props":1737,"children":1738},"ol",{},[1739,1758,1777,1798],{"type":27,"tag":44,"props":1740,"children":1741},{},[1742,1744,1750,1752],{"type":32,"value":1743},"安装 ",{"type":27,"tag":670,"props":1745,"children":1747},{"className":1746},[],[1748],{"type":32,"value":1749},"@rspack/cli",{"type":32,"value":1751}," 与 ",{"type":27,"tag":670,"props":1753,"children":1755},{"className":1754},[],[1756],{"type":32,"value":1757},"@rspack/core",{"type":27,"tag":44,"props":1759,"children":1760},{},[1761,1763,1769,1771],{"type":32,"value":1762},"把 ",{"type":27,"tag":670,"props":1764,"children":1766},{"className":1765},[],[1767],{"type":32,"value":1768},"webpack.config.js",{"type":32,"value":1770}," 改为 ",{"type":27,"tag":670,"props":1772,"children":1774},{"className":1773},[],[1775],{"type":32,"value":1776},"rspack.config.js",{"type":27,"tag":44,"props":1778,"children":1779},{},[1780,1782,1788,1790,1796],{"type":32,"value":1781},"替换构建命令（",{"type":27,"tag":670,"props":1783,"children":1785},{"className":1784},[],[1786],{"type":32,"value":1787},"rspack build",{"type":32,"value":1789}," / ",{"type":27,"tag":670,"props":1791,"children":1793},{"className":1792},[],[1794],{"type":32,"value":1795},"rspack dev",{"type":32,"value":1797},"）",{"type":27,"tag":44,"props":1799,"children":1800},{},[1801],{"type":32,"value":1802},"运行并修复兼容性问题",{"type":27,"tag":28,"props":1804,"children":1805},{},[1806,1808,1814],{"type":32,"value":1807},"预计迁移成本：1",{"type":27,"tag":1809,"props":1810,"children":1811},"del",{},[1812],{"type":32,"value":1813},"2 天（小型项目）/ 1",{"type":32,"value":1815},"2 周（大型项目）",{"type":27,"tag":655,"props":1817,"children":1819},{"id":1818},"_42-兼容性边界哪些需要调整",[1820],{"type":32,"value":1821},"4.2 兼容性边界：哪些需要调整",{"type":27,"tag":28,"props":1823,"children":1824},{},[1825],{"type":27,"tag":801,"props":1826,"children":1827},{},[1828],{"type":32,"value":1829},"插件兼容",{"type":27,"tag":40,"props":1831,"children":1832},{},[1833,1838],{"type":27,"tag":44,"props":1834,"children":1835},{},[1836],{"type":32,"value":1837},"Rspack 支持大部分 Webpack 插件（API 兼容）",{"type":27,"tag":44,"props":1839,"children":1840},{},[1841],{"type":32,"value":1842},"但少数复杂插件（例如深度依赖 Webpack 内部 API）需要适配",{"type":27,"tag":28,"props":1844,"children":1845},{},[1846],{"type":27,"tag":801,"props":1847,"children":1848},{},[1849],{"type":32,"value":1850},"Loader 兼容",{"type":27,"tag":40,"props":1852,"children":1853},{},[1854,1859],{"type":27,"tag":44,"props":1855,"children":1856},{},[1857],{"type":32,"value":1858},"常用 loader（babel-loader、css-loader、postcss-loader）兼容",{"type":27,"tag":44,"props":1860,"children":1861},{},[1862],{"type":32,"value":1863},"部分自定义 loader 需要测试",{"type":27,"tag":28,"props":1865,"children":1866},{},[1867],{"type":27,"tag":801,"props":1868,"children":1869},{},[1870],{"type":32,"value":1871},"配置差异",{"type":27,"tag":40,"props":1873,"children":1874},{},[1875,1880],{"type":27,"tag":44,"props":1876,"children":1877},{},[1878],{"type":32,"value":1879},"resolve、output、optimization 等配置与 Webpack 高度一致",{"type":27,"tag":44,"props":1881,"children":1882},{},[1883],{"type":32,"value":1884},"少数高级配置需要查文档",{"type":27,"tag":655,"props":1886,"children":1888},{"id":1887},"_43-推荐的迁移节奏",[1889],{"type":32,"value":1890},"4.3 推荐的迁移节奏",{"type":27,"tag":40,"props":1892,"children":1893},{},[1894,1899,1904],{"type":27,"tag":44,"props":1895,"children":1896},{},[1897],{"type":32,"value":1898},"Week 1：本地开发环境先行",{"type":27,"tag":44,"props":1900,"children":1901},{},[1902],{"type":32,"value":1903},"Week 2：CI 构建切换（并保留 Webpack 作为 fallback）",{"type":27,"tag":44,"props":1905,"children":1906},{},[1907],{"type":32,"value":1908},"Week 3~4：生产构建切换并观测",{"type":27,"tag":1364,"props":1910,"children":1911},{},[],{"type":27,"tag":75,"props":1913,"children":1915},{"id":1914},"_5-性能调优让-rspack-更快",[1916],{"type":32,"value":1917},"5. 性能调优：让 Rspack 更快",{"type":27,"tag":655,"props":1919,"children":1921},{"id":1920},"_51-缓存策略",[1922],{"type":32,"value":1923},"5.1 缓存策略",{"type":27,"tag":28,"props":1925,"children":1926},{},[1927],{"type":32,"value":1928},"默认缓存已经很激进，但你可以：",{"type":27,"tag":40,"props":1930,"children":1931},{},[1932,1937],{"type":27,"tag":44,"props":1933,"children":1934},{},[1935],{"type":32,"value":1936},"显式配置缓存目录（例如挂载 SSD）",{"type":27,"tag":44,"props":1938,"children":1939},{},[1940],{"type":32,"value":1941},"在 CI 上持久化缓存（例如用 actions/cache）",{"type":27,"tag":655,"props":1943,"children":1945},{"id":1944},"_52-并行度调优",[1946],{"type":32,"value":1947},"5.2 并行度调优",{"type":27,"tag":28,"props":1949,"children":1950},{},[1951],{"type":32,"value":1952},"Rspack 默认会用所有 CPU 核心，但在容器环境（例如 CI）可能需要限制：",{"type":27,"tag":662,"props":1954,"children":1959},{"className":1955,"code":1957,"language":1958,"meta":7},[1956],"language-js","module.exports = {\n  experiments: {\n    rspackFuture: {\n      disableTransformByDefault: true, // 减少不必要转换\n    },\n  },\n}\n","js",[1960],{"type":27,"tag":670,"props":1961,"children":1962},{"__ignoreMap":7},[1963],{"type":32,"value":1957},{"type":27,"tag":655,"props":1965,"children":1967},{"id":1966},"_53-tree-shaking-与-dead-code-elimination",[1968],{"type":32,"value":1969},"5.3 Tree Shaking 与 Dead Code Elimination",{"type":27,"tag":28,"props":1971,"children":1972},{},[1973],{"type":32,"value":1974},"Rspack 内置 Tree Shaking，但效果取决于：",{"type":27,"tag":40,"props":1976,"children":1977},{},[1978,1983,1988],{"type":27,"tag":44,"props":1979,"children":1980},{},[1981],{"type":32,"value":1982},"是否使用 ESM（而非 CommonJS）",{"type":27,"tag":44,"props":1984,"children":1985},{},[1986],{"type":32,"value":1987},"副作用标记（sideEffects: false）",{"type":27,"tag":44,"props":1989,"children":1990},{},[1991],{"type":32,"value":1992},"动态 import 的拆分策略",{"type":27,"tag":28,"props":1994,"children":1995},{},[1996],{"type":32,"value":1997},"建议：",{"type":27,"tag":40,"props":1999,"children":2000},{},[2001,2014],{"type":27,"tag":44,"props":2002,"children":2003},{},[2004,2006,2012],{"type":32,"value":2005},"对第三方库检查 ",{"type":27,"tag":670,"props":2007,"children":2009},{"className":2008},[],[2010],{"type":32,"value":2011},"sideEffects",{"type":32,"value":2013}," 配置",{"type":27,"tag":44,"props":2015,"children":2016},{},[2017,2019,2025],{"type":32,"value":2018},"避免\"全量引入后 tree shake\"（例如 ",{"type":27,"tag":670,"props":2020,"children":2022},{"className":2021},[],[2023],{"type":32,"value":2024},"import * from 'lodash'",{"type":32,"value":1797},{"type":27,"tag":1364,"props":2027,"children":2028},{},[],{"type":27,"tag":75,"props":2030,"children":2032},{"id":2031},"_6-产物分析与优化",[2033],{"type":32,"value":2034},"6. 产物分析与优化",{"type":27,"tag":28,"props":2036,"children":2037},{},[2038],{"type":32,"value":2039},"Rspack 提供内置分析工具：",{"type":27,"tag":662,"props":2041,"children":2046},{"className":2042,"code":2044,"language":2045,"meta":7},[2043],"language-bash","rspack build --analyze\n","bash",[2047],{"type":27,"tag":670,"props":2048,"children":2049},{"__ignoreMap":7},[2050],{"type":32,"value":2044},{"type":27,"tag":28,"props":2052,"children":2053},{},[2054],{"type":32,"value":2055},"关键指标：",{"type":27,"tag":40,"props":2057,"children":2058},{},[2059,2064,2069],{"type":27,"tag":44,"props":2060,"children":2061},{},[2062],{"type":32,"value":2063},"各 chunk 体积分布",{"type":27,"tag":44,"props":2065,"children":2066},{},[2067],{"type":32,"value":2068},"重复依赖（例如多个版本的 lodash）",{"type":27,"tag":44,"props":2070,"children":2071},{},[2072],{"type":32,"value":2073},"未被 tree shake 的代码",{"type":27,"tag":28,"props":2075,"children":2076},{},[2077],{"type":32,"value":2078},"优化策略：",{"type":27,"tag":40,"props":2080,"children":2081},{},[2082,2087,2092],{"type":27,"tag":44,"props":2083,"children":2084},{},[2085],{"type":32,"value":2086},"拆分 vendor chunk（按更新频率）",{"type":27,"tag":44,"props":2088,"children":2089},{},[2090],{"type":32,"value":2091},"对大型库按需引入（例如 antd/lodash-es）",{"type":27,"tag":44,"props":2093,"children":2094},{},[2095],{"type":32,"value":2096},"检查动态 import 的粒度",{"type":27,"tag":1364,"props":2098,"children":2099},{},[],{"type":27,"tag":75,"props":2101,"children":2103},{"id":2102},"_7-生产可观测性让构建可量化",[2104],{"type":32,"value":2105},"7. 生产可观测性：让构建可量化",{"type":27,"tag":28,"props":2107,"children":2108},{},[2109],{"type":32,"value":2110},"在 CI/CD 里，你需要能回答：",{"type":27,"tag":40,"props":2112,"children":2113},{},[2114,2119,2124],{"type":27,"tag":44,"props":2115,"children":2116},{},[2117],{"type":32,"value":2118},"这次构建为什么变慢？",{"type":27,"tag":44,"props":2120,"children":2121},{},[2122],{"type":32,"value":2123},"产物为什么变大？",{"type":27,"tag":44,"props":2125,"children":2126},{},[2127],{"type":32,"value":2128},"哪个模块耗时最多？",{"type":27,"tag":28,"props":2130,"children":2131},{},[2132],{"type":32,"value":2133},"建议在 CI 里记录：",{"type":27,"tag":40,"props":2135,"children":2136},{},[2137,2142,2147,2152],{"type":27,"tag":44,"props":2138,"children":2139},{},[2140],{"type":32,"value":2141},"构建总耗时",{"type":27,"tag":44,"props":2143,"children":2144},{},[2145],{"type":32,"value":2146},"各阶段耗时（resolve、compile、optimize、emit）",{"type":27,"tag":44,"props":2148,"children":2149},{},[2150],{"type":32,"value":2151},"产物体积（按 chunk）",{"type":27,"tag":44,"props":2153,"children":2154},{},[2155],{"type":32,"value":2156},"缓存命中率",{"type":27,"tag":28,"props":2158,"children":2159},{},[2160],{"type":32,"value":2161},"落地方式：",{"type":27,"tag":40,"props":2163,"children":2164},{},[2165,2170,2175],{"type":27,"tag":44,"props":2166,"children":2167},{},[2168],{"type":32,"value":2169},"用 Rspack 的 stats 输出",{"type":27,"tag":44,"props":2171,"children":2172},{},[2173],{"type":32,"value":2174},"在 CI 日志里保留关键指标",{"type":27,"tag":44,"props":2176,"children":2177},{},[2178],{"type":32,"value":2179},"对产物体积做 baseline 对比（变化 > 5% 报警）",{"type":27,"tag":1364,"props":2181,"children":2182},{},[],{"type":27,"tag":75,"props":2184,"children":2186},{"id":2185},"_8-常见问题排查",[2187],{"type":32,"value":2188},"8. 常见问题排查",{"type":27,"tag":655,"props":2190,"children":2192},{"id":2191},"_81-迁移后变慢了",[2193],{"type":32,"value":2194},"8.1 \"迁移后变慢了\"",{"type":27,"tag":28,"props":2196,"children":2197},{},[2198],{"type":32,"value":2199},"排查顺序：",{"type":27,"tag":40,"props":2201,"children":2202},{},[2203,2208,2213],{"type":27,"tag":44,"props":2204,"children":2205},{},[2206],{"type":32,"value":2207},"缓存是否生效（首次构建慢正常）",{"type":27,"tag":44,"props":2209,"children":2210},{},[2211],{"type":32,"value":2212},"是否有 loader 拖慢（例如未优化的自定义 loader）",{"type":27,"tag":44,"props":2214,"children":2215},{},[2216],{"type":32,"value":2217},"并行度是否受限（例如 CI 限制 CPU）",{"type":27,"tag":655,"props":2219,"children":2221},{"id":2220},"_82-产物体积变大了",[2222],{"type":32,"value":2223},"8.2 \"产物体积变大了\"",{"type":27,"tag":40,"props":2225,"children":2226},{},[2227,2232,2237],{"type":27,"tag":44,"props":2228,"children":2229},{},[2230],{"type":32,"value":2231},"检查 Tree Shaking 是否生效",{"type":27,"tag":44,"props":2233,"children":2234},{},[2235],{"type":32,"value":2236},"检查是否引入了更多 polyfill",{"type":27,"tag":44,"props":2238,"children":2239},{},[2240],{"type":32,"value":2241},"对比 chunk 分布（用 analyze）",{"type":27,"tag":655,"props":2243,"children":2245},{"id":2244},"_83-某些模块编译失败",[2246],{"type":32,"value":2247},"8.3 \"某些模块编译失败\"",{"type":27,"tag":40,"props":2249,"children":2250},{},[2251,2256,2261],{"type":27,"tag":44,"props":2252,"children":2253},{},[2254],{"type":32,"value":2255},"检查是否依赖 Webpack 特定 API",{"type":27,"tag":44,"props":2257,"children":2258},{},[2259],{"type":32,"value":2260},"查看 Rspack 官方兼容性列表",{"type":27,"tag":44,"props":2262,"children":2263},{},[2264],{"type":32,"value":2265},"在 GitHub Issues 搜索类似问题",{"type":27,"tag":1364,"props":2267,"children":2268},{},[],{"type":27,"tag":75,"props":2270,"children":2272},{"id":2271},"_9-rspack-vs-vite什么时候选哪个",[2273],{"type":32,"value":2274},"9. Rspack vs Vite：什么时候选哪个？",{"type":27,"tag":1542,"props":2276,"children":2277},{},[2278,2298],{"type":27,"tag":1546,"props":2279,"children":2280},{},[2281],{"type":27,"tag":1550,"props":2282,"children":2283},{},[2284,2289,2293],{"type":27,"tag":1554,"props":2285,"children":2286},{},[2287],{"type":32,"value":2288},"维度",{"type":27,"tag":1554,"props":2290,"children":2291},{},[2292],{"type":32,"value":1274},{"type":27,"tag":1554,"props":2294,"children":2295},{},[2296],{"type":32,"value":2297},"Vite",{"type":27,"tag":1574,"props":2299,"children":2300},{},[2301,2319,2336,2354,2372],{"type":27,"tag":1550,"props":2302,"children":2303},{},[2304,2309,2314],{"type":27,"tag":1581,"props":2305,"children":2306},{},[2307],{"type":32,"value":2308},"开发速度",{"type":27,"tag":1581,"props":2310,"children":2311},{},[2312],{"type":32,"value":2313},"极快（Rust 编译）",{"type":27,"tag":1581,"props":2315,"children":2316},{},[2317],{"type":32,"value":2318},"极快（ESM 直连）",{"type":27,"tag":1550,"props":2320,"children":2321},{},[2322,2326,2331],{"type":27,"tag":1581,"props":2323,"children":2324},{},[2325],{"type":32,"value":1637},{"type":27,"tag":1581,"props":2327,"children":2328},{},[2329],{"type":32,"value":2330},"快（全量编译优化）",{"type":27,"tag":1581,"props":2332,"children":2333},{},[2334],{"type":32,"value":2335},"快（Rollup）",{"type":27,"tag":1550,"props":2337,"children":2338},{},[2339,2344,2349],{"type":27,"tag":1581,"props":2340,"children":2341},{},[2342],{"type":32,"value":2343},"Webpack 兼容",{"type":27,"tag":1581,"props":2345,"children":2346},{},[2347],{"type":32,"value":2348},"高",{"type":27,"tag":1581,"props":2350,"children":2351},{},[2352],{"type":32,"value":2353},"低",{"type":27,"tag":1550,"props":2355,"children":2356},{},[2357,2362,2367],{"type":27,"tag":1581,"props":2358,"children":2359},{},[2360],{"type":32,"value":2361},"插件生态",{"type":27,"tag":1581,"props":2363,"children":2364},{},[2365],{"type":32,"value":2366},"Webpack 生态",{"type":27,"tag":1581,"props":2368,"children":2369},{},[2370],{"type":32,"value":2371},"Rollup/Vite 生态",{"type":27,"tag":1550,"props":2373,"children":2374},{},[2375,2380,2385],{"type":27,"tag":1581,"props":2376,"children":2377},{},[2378],{"type":32,"value":2379},"适用项目",{"type":27,"tag":1581,"props":2381,"children":2382},{},[2383],{"type":32,"value":2384},"Webpack 迁移、大型 monorepo",{"type":27,"tag":1581,"props":2386,"children":2387},{},[2388],{"type":32,"value":2389},"新项目、中小型",{"type":27,"tag":28,"props":2391,"children":2392},{},[2393],{"type":32,"value":2394},"选择建议：",{"type":27,"tag":40,"props":2396,"children":2397},{},[2398,2403,2408],{"type":27,"tag":44,"props":2399,"children":2400},{},[2401],{"type":32,"value":2402},"新项目：优先 Vite",{"type":27,"tag":44,"props":2404,"children":2405},{},[2406],{"type":32,"value":2407},"Webpack 遗留项目：Rspack",{"type":27,"tag":44,"props":2409,"children":2410},{},[2411],{"type":32,"value":2412},"大型 monorepo + Webpack 依赖：Rspack",{"type":27,"tag":1364,"props":2414,"children":2415},{},[],{"type":27,"tag":75,"props":2417,"children":2419},{"id":2418},"_10-上线检查清单",[2420],{"type":32,"value":2421},"10. 上线检查清单",{"type":27,"tag":40,"props":2423,"children":2425},{"className":2424},[883],[2426,2435,2444,2453,2462,2471],{"type":27,"tag":44,"props":2427,"children":2429},{"className":2428},[888],[2430,2433],{"type":27,"tag":891,"props":2431,"children":2432},{"disabled":893,"type":894},[],{"type":32,"value":2434}," 本地开发环境已验证（HMR/热更新正常）",{"type":27,"tag":44,"props":2436,"children":2438},{"className":2437},[888],[2439,2442],{"type":27,"tag":891,"props":2440,"children":2441},{"disabled":893,"type":894},[],{"type":32,"value":2443}," CI 构建已切换并观测 3 天以上",{"type":27,"tag":44,"props":2445,"children":2447},{"className":2446},[888],[2448,2451],{"type":27,"tag":891,"props":2449,"children":2450},{"disabled":893,"type":894},[],{"type":32,"value":2452}," 产物体积对比无异常（baseline ± 5%）",{"type":27,"tag":44,"props":2454,"children":2456},{"className":2455},[888],[2457,2460],{"type":27,"tag":891,"props":2458,"children":2459},{"disabled":893,"type":894},[],{"type":32,"value":2461}," 关键页面功能回归测试通过",{"type":27,"tag":44,"props":2463,"children":2465},{"className":2464},[888],[2466,2469],{"type":27,"tag":891,"props":2467,"children":2468},{"disabled":893,"type":894},[],{"type":32,"value":2470}," 有构建耗时与缓存命中率监控",{"type":27,"tag":44,"props":2472,"children":2474},{"className":2473},[888],[2475,2478],{"type":27,"tag":891,"props":2476,"children":2477},{"disabled":893,"type":894},[],{"type":32,"value":2479}," 有回滚方案（保留 Webpack 配置）",{"type":27,"tag":1364,"props":2481,"children":2482},{},[],{"type":27,"tag":75,"props":2484,"children":2485},{"id":558},[2486],{"type":32,"value":558},{"type":27,"tag":28,"props":2488,"children":2489},{},[2490],{"type":32,"value":2491},"Rspack 的核心价值是：",{"type":27,"tag":40,"props":2493,"children":2494},{},[2495,2500,2505],{"type":27,"tag":44,"props":2496,"children":2497},{},[2498],{"type":32,"value":2499},"在 Webpack 生态下获得接近 Vite 的速度",{"type":27,"tag":44,"props":2501,"children":2502},{},[2503],{"type":32,"value":2504},"对大型项目构建成本与开发体验的显著改善",{"type":27,"tag":44,"props":2506,"children":2507},{},[2508],{"type":32,"value":2509},"生产级稳定性（字节跳动内部大规模验证）",{"title":7,"searchDepth":603,"depth":603,"links":2511},[2512,2513,2517,2522,2523,2528,2533,2534,2535,2540,2541,2542],{"id":1285,"depth":606,"text":1270},{"id":1369,"depth":606,"text":1372,"children":2514},[2515,2516],{"id":1380,"depth":603,"text":1383},{"id":1419,"depth":603,"text":1422},{"id":1446,"depth":606,"text":1449,"children":2518},[2519,2520,2521],{"id":1452,"depth":603,"text":1455},{"id":1476,"depth":603,"text":1479},{"id":1500,"depth":603,"text":1503},{"id":1532,"depth":606,"text":1535},{"id":1715,"depth":606,"text":1718,"children":2524},[2525,2526,2527],{"id":1721,"depth":603,"text":1724},{"id":1818,"depth":603,"text":1821},{"id":1887,"depth":603,"text":1890},{"id":1914,"depth":606,"text":1917,"children":2529},[2530,2531,2532],{"id":1920,"depth":603,"text":1923},{"id":1944,"depth":603,"text":1947},{"id":1966,"depth":603,"text":1969},{"id":2031,"depth":606,"text":2034},{"id":2102,"depth":606,"text":2105},{"id":2185,"depth":606,"text":2188,"children":2536},[2537,2538,2539],{"id":2191,"depth":603,"text":2194},{"id":2220,"depth":603,"text":2223},{"id":2244,"depth":603,"text":2247},{"id":2271,"depth":606,"text":2274},{"id":2418,"depth":606,"text":2421},{"id":558,"depth":606,"text":558},"content:topics:frontend:rspack-performance-practice.md","topics/frontend/rspack-performance-practice.md","topics/frontend/rspack-performance-practice",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"topic":5,"author":11,"tags":2547,"image":18,"imageQuery":19,"pexelsPhotoId":20,"pexelsUrl":21,"featured":6,"readingTime":22,"body":2548,"_type":615,"_id":616,"_source":617,"_file":618,"_stem":619,"_extension":620},[13,14,15,16,17],{"type":24,"children":2549,"toc":3011},[2550,2554,2558,2581,2585,2589,2593,2597,2612,2616,2631,2635,2639,2643,2647,2666,2670,2674,2689,2693,2697,2701,2705,2724,2728,2743,2747,2751,2755,2759,2778,2782,2797,2801,2805,2809,2813,2832,2836,2840,2855,2859,2863,2867,2871,2890,2894,2898,2902,2921,2925,2944,2948,2952,2975,2979,2983,2987],{"type":27,"tag":28,"props":2551,"children":2552},{},[2553],{"type":32,"value":33},{"type":27,"tag":28,"props":2555,"children":2556},{},[2557],{"type":32,"value":38},{"type":27,"tag":40,"props":2559,"children":2560},{},[2561,2565,2569,2573,2577],{"type":27,"tag":44,"props":2562,"children":2563},{},[2564],{"type":32,"value":48},{"type":27,"tag":44,"props":2566,"children":2567},{},[2568],{"type":32,"value":53},{"type":27,"tag":44,"props":2570,"children":2571},{},[2572],{"type":32,"value":58},{"type":27,"tag":44,"props":2574,"children":2575},{},[2576],{"type":32,"value":63},{"type":27,"tag":44,"props":2578,"children":2579},{},[2580],{"type":32,"value":68},{"type":27,"tag":28,"props":2582,"children":2583},{},[2584],{"type":32,"value":73},{"type":27,"tag":75,"props":2586,"children":2587},{"id":77},[2588],{"type":32,"value":80},{"type":27,"tag":28,"props":2590,"children":2591},{},[2592],{"type":32,"value":85},{"type":27,"tag":28,"props":2594,"children":2595},{},[2596],{"type":32,"value":90},{"type":27,"tag":40,"props":2598,"children":2599},{},[2600,2604,2608],{"type":27,"tag":44,"props":2601,"children":2602},{},[2603],{"type":32,"value":98},{"type":27,"tag":44,"props":2605,"children":2606},{},[2607],{"type":32,"value":103},{"type":27,"tag":44,"props":2609,"children":2610},{},[2611],{"type":32,"value":108},{"type":27,"tag":28,"props":2613,"children":2614},{},[2615],{"type":32,"value":113},{"type":27,"tag":40,"props":2617,"children":2618},{},[2619,2623,2627],{"type":27,"tag":44,"props":2620,"children":2621},{},[2622],{"type":32,"value":121},{"type":27,"tag":44,"props":2624,"children":2625},{},[2626],{"type":32,"value":126},{"type":27,"tag":44,"props":2628,"children":2629},{},[2630],{"type":32,"value":131},{"type":27,"tag":28,"props":2632,"children":2633},{},[2634],{"type":32,"value":136},{"type":27,"tag":75,"props":2636,"children":2637},{"id":139},[2638],{"type":32,"value":142},{"type":27,"tag":28,"props":2640,"children":2641},{},[2642],{"type":32,"value":147},{"type":27,"tag":28,"props":2644,"children":2645},{},[2646],{"type":32,"value":152},{"type":27,"tag":40,"props":2648,"children":2649},{},[2650,2654,2658,2662],{"type":27,"tag":44,"props":2651,"children":2652},{},[2653],{"type":32,"value":160},{"type":27,"tag":44,"props":2655,"children":2656},{},[2657],{"type":32,"value":165},{"type":27,"tag":44,"props":2659,"children":2660},{},[2661],{"type":32,"value":170},{"type":27,"tag":44,"props":2663,"children":2664},{},[2665],{"type":32,"value":175},{"type":27,"tag":28,"props":2667,"children":2668},{},[2669],{"type":32,"value":180},{"type":27,"tag":28,"props":2671,"children":2672},{},[2673],{"type":32,"value":185},{"type":27,"tag":40,"props":2675,"children":2676},{},[2677,2681,2685],{"type":27,"tag":44,"props":2678,"children":2679},{},[2680],{"type":32,"value":193},{"type":27,"tag":44,"props":2682,"children":2683},{},[2684],{"type":32,"value":198},{"type":27,"tag":44,"props":2686,"children":2687},{},[2688],{"type":32,"value":203},{"type":27,"tag":28,"props":2690,"children":2691},{},[2692],{"type":32,"value":208},{"type":27,"tag":75,"props":2694,"children":2695},{"id":211},[2696],{"type":32,"value":214},{"type":27,"tag":28,"props":2698,"children":2699},{},[2700],{"type":32,"value":219},{"type":27,"tag":28,"props":2702,"children":2703},{},[2704],{"type":32,"value":224},{"type":27,"tag":40,"props":2706,"children":2707},{},[2708,2712,2716,2720],{"type":27,"tag":44,"props":2709,"children":2710},{},[2711],{"type":32,"value":232},{"type":27,"tag":44,"props":2713,"children":2714},{},[2715],{"type":32,"value":237},{"type":27,"tag":44,"props":2717,"children":2718},{},[2719],{"type":32,"value":242},{"type":27,"tag":44,"props":2721,"children":2722},{},[2723],{"type":32,"value":247},{"type":27,"tag":28,"props":2725,"children":2726},{},[2727],{"type":32,"value":252},{"type":27,"tag":40,"props":2729,"children":2730},{},[2731,2735,2739],{"type":27,"tag":44,"props":2732,"children":2733},{},[2734],{"type":32,"value":260},{"type":27,"tag":44,"props":2736,"children":2737},{},[2738],{"type":32,"value":265},{"type":27,"tag":44,"props":2740,"children":2741},{},[2742],{"type":32,"value":270},{"type":27,"tag":28,"props":2744,"children":2745},{},[2746],{"type":32,"value":275},{"type":27,"tag":75,"props":2748,"children":2749},{"id":278},[2750],{"type":32,"value":278},{"type":27,"tag":28,"props":2752,"children":2753},{},[2754],{"type":32,"value":285},{"type":27,"tag":28,"props":2756,"children":2757},{},[2758],{"type":32,"value":290},{"type":27,"tag":40,"props":2760,"children":2761},{},[2762,2766,2770,2774],{"type":27,"tag":44,"props":2763,"children":2764},{},[2765],{"type":32,"value":298},{"type":27,"tag":44,"props":2767,"children":2768},{},[2769],{"type":32,"value":303},{"type":27,"tag":44,"props":2771,"children":2772},{},[2773],{"type":32,"value":308},{"type":27,"tag":44,"props":2775,"children":2776},{},[2777],{"type":32,"value":313},{"type":27,"tag":28,"props":2779,"children":2780},{},[2781],{"type":32,"value":318},{"type":27,"tag":40,"props":2783,"children":2784},{},[2785,2789,2793],{"type":27,"tag":44,"props":2786,"children":2787},{},[2788],{"type":32,"value":326},{"type":27,"tag":44,"props":2790,"children":2791},{},[2792],{"type":32,"value":331},{"type":27,"tag":44,"props":2794,"children":2795},{},[2796],{"type":32,"value":336},{"type":27,"tag":28,"props":2798,"children":2799},{},[2800],{"type":32,"value":341},{"type":27,"tag":75,"props":2802,"children":2803},{"id":344},[2804],{"type":32,"value":344},{"type":27,"tag":28,"props":2806,"children":2807},{},[2808],{"type":32,"value":351},{"type":27,"tag":28,"props":2810,"children":2811},{},[2812],{"type":32,"value":356},{"type":27,"tag":40,"props":2814,"children":2815},{},[2816,2820,2824,2828],{"type":27,"tag":44,"props":2817,"children":2818},{},[2819],{"type":32,"value":364},{"type":27,"tag":44,"props":2821,"children":2822},{},[2823],{"type":32,"value":369},{"type":27,"tag":44,"props":2825,"children":2826},{},[2827],{"type":32,"value":374},{"type":27,"tag":44,"props":2829,"children":2830},{},[2831],{"type":32,"value":379},{"type":27,"tag":28,"props":2833,"children":2834},{},[2835],{"type":32,"value":384},{"type":27,"tag":28,"props":2837,"children":2838},{},[2839],{"type":32,"value":389},{"type":27,"tag":40,"props":2841,"children":2842},{},[2843,2847,2851],{"type":27,"tag":44,"props":2844,"children":2845},{},[2846],{"type":32,"value":397},{"type":27,"tag":44,"props":2848,"children":2849},{},[2850],{"type":32,"value":402},{"type":27,"tag":44,"props":2852,"children":2853},{},[2854],{"type":32,"value":407},{"type":27,"tag":28,"props":2856,"children":2857},{},[2858],{"type":32,"value":412},{"type":27,"tag":75,"props":2860,"children":2861},{"id":415},[2862],{"type":32,"value":415},{"type":27,"tag":28,"props":2864,"children":2865},{},[2866],{"type":32,"value":422},{"type":27,"tag":28,"props":2868,"children":2869},{},[2870],{"type":32,"value":427},{"type":27,"tag":40,"props":2872,"children":2873},{},[2874,2878,2882,2886],{"type":27,"tag":44,"props":2875,"children":2876},{},[2877],{"type":32,"value":435},{"type":27,"tag":44,"props":2879,"children":2880},{},[2881],{"type":32,"value":440},{"type":27,"tag":44,"props":2883,"children":2884},{},[2885],{"type":32,"value":445},{"type":27,"tag":44,"props":2887,"children":2888},{},[2889],{"type":32,"value":450},{"type":27,"tag":28,"props":2891,"children":2892},{},[2893],{"type":32,"value":455},{"type":27,"tag":75,"props":2895,"children":2896},{"id":458},[2897],{"type":32,"value":461},{"type":27,"tag":28,"props":2899,"children":2900},{},[2901],{"type":32,"value":466},{"type":27,"tag":40,"props":2903,"children":2904},{},[2905,2909,2913,2917],{"type":27,"tag":44,"props":2906,"children":2907},{},[2908],{"type":32,"value":474},{"type":27,"tag":44,"props":2910,"children":2911},{},[2912],{"type":32,"value":479},{"type":27,"tag":44,"props":2914,"children":2915},{},[2916],{"type":32,"value":484},{"type":27,"tag":44,"props":2918,"children":2919},{},[2920],{"type":32,"value":489},{"type":27,"tag":28,"props":2922,"children":2923},{},[2924],{"type":32,"value":494},{"type":27,"tag":40,"props":2926,"children":2927},{},[2928,2932,2936,2940],{"type":27,"tag":44,"props":2929,"children":2930},{},[2931],{"type":32,"value":502},{"type":27,"tag":44,"props":2933,"children":2934},{},[2935],{"type":32,"value":507},{"type":27,"tag":44,"props":2937,"children":2938},{},[2939],{"type":32,"value":512},{"type":27,"tag":44,"props":2941,"children":2942},{},[2943],{"type":32,"value":517},{"type":27,"tag":28,"props":2945,"children":2946},{},[2947],{"type":32,"value":522},{"type":27,"tag":75,"props":2949,"children":2950},{"id":525},[2951],{"type":32,"value":525},{"type":27,"tag":40,"props":2953,"children":2954},{},[2955,2959,2963,2967,2971],{"type":27,"tag":44,"props":2956,"children":2957},{},[2958],{"type":32,"value":535},{"type":27,"tag":44,"props":2960,"children":2961},{},[2962],{"type":32,"value":540},{"type":27,"tag":44,"props":2964,"children":2965},{},[2966],{"type":32,"value":545},{"type":27,"tag":44,"props":2968,"children":2969},{},[2970],{"type":32,"value":550},{"type":27,"tag":44,"props":2972,"children":2973},{},[2974],{"type":32,"value":555},{"type":27,"tag":75,"props":2976,"children":2977},{"id":558},[2978],{"type":32,"value":558},{"type":27,"tag":28,"props":2980,"children":2981},{},[2982],{"type":32,"value":565},{"type":27,"tag":28,"props":2984,"children":2985},{},[2986],{"type":32,"value":570},{"type":27,"tag":40,"props":2988,"children":2989},{},[2990,2997,3004],{"type":27,"tag":44,"props":2991,"children":2992},{},[2993],{"type":27,"tag":578,"props":2994,"children":2995},{"href":580},[2996],{"type":32,"value":583},{"type":27,"tag":44,"props":2998,"children":2999},{},[3000],{"type":27,"tag":578,"props":3001,"children":3002},{"href":589},[3003],{"type":32,"value":592},{"type":27,"tag":44,"props":3005,"children":3006},{},[3007],{"type":27,"tag":578,"props":3008,"children":3009},{"href":598},[3010],{"type":32,"value":601},{"title":7,"searchDepth":603,"depth":603,"links":3012},[3013,3014,3015,3016,3017,3018,3019,3020,3021],{"id":77,"depth":606,"text":80},{"id":139,"depth":606,"text":142},{"id":211,"depth":606,"text":214},{"id":278,"depth":606,"text":278},{"id":344,"depth":606,"text":344},{"id":415,"depth":606,"text":415},{"id":458,"depth":606,"text":461},{"id":525,"depth":606,"text":525},{"id":558,"depth":606,"text":558},1776916085394]