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