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