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