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