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