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