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