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