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