[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"i-ri:search-line":3,"i-ri:moon-line":8,"i-ri:sun-line":10,"i-ri:menu-3-line":12,"i-ri:close-line":14,"notes-module-items-react":16,"notes-page-react-14-performance\u002F03-asset-and-bundle-optimization":494,"i-ri:arrow-left-s-line":2581,"i-ri:menu-2-line":2583,"i-ri:arrow-right-s-line":2585,"i-ep:copy-document":2587},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617m-2.006-.742A6.98 6.98 0 0 0 18 11c0-3.867-3.133-7-7-7s-7 3.133-7 7s3.133 7 7 7a6.98 6.98 0 0 0 4.875-1.975z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7m-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A8 8 0 0 0 4 12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm6 7h12v2H9zm-6 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cpath fill=\"currentColor\" d=\"m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z\"\u002F>",[17,22,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,462,466,470,474,478,482,486,490],{"path":18,"title":19,"meta":20},"\u002Fnotes\u002Freact\u002F01-basics\u002F01-how-to-read-this-repo","如何阅读本仓库（学习路径与章节依赖）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},"2026-11-05T09:47:15.000Z",{"path":23,"title":24,"meta":25},"\u002Fnotes\u002Freact\u002F01-basics\u002F02-render-vs-commit","React 渲染两阶段：Render vs Commit（总览）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":27,"title":28,"meta":29},"\u002Fnotes\u002Freact\u002F01-basics\u002F03-update-pipeline-birdview","从“更新”到“页面变更”：一次 setState 的全链路鸟瞰",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":31,"title":32,"meta":33},"\u002Fnotes\u002Freact\u002F01-basics","基础入门（建议先读）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":35,"title":36,"meta":37},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F01-browser-multi-process","浏览器多进程架构",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":39,"title":40,"meta":41},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F02-event-loop-overview","事件循环概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":43,"title":44,"meta":45},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F03-call-stack","函数调用栈",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":47,"title":48,"meta":49},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F04-threads","线程介绍",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":51,"title":52,"meta":53},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F05-refresh-rate-and-queues","刷新率与执行队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":55,"title":56,"meta":57},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F06-settimeout","setTimeout 原理详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":59,"title":60,"meta":61},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F07-promise","Promise 原理详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":63,"title":64,"meta":65},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F08-event-loop-in-practice","事件循环机制（综合）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":67,"title":68,"meta":69},"\u002Fnotes\u002Freact\u002F02-event-loop\u002F09-priority-queues","优先级队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":71,"title":72,"meta":73},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F01-concept","并发模式：概念",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":75,"title":76,"meta":77},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F02-demo","案例演示并发模式",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":79,"title":80,"meta":81},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F03-high-priority-preemption","高优先级插队",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":83,"title":84,"meta":85},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F04-preemption-vs-interruption","插队的影响、与中断的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":87,"title":88,"meta":89},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F05-shouldYield","中断条件：shouldYield",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":91,"title":92,"meta":93},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F06-react-tasks-and-queues","React 中的任务与队列",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":95,"title":96,"meta":97},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F07-ensureRootIsScheduled","ensureRootIsScheduled",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":99,"title":100,"meta":101},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F08-batch-updates-merge","合并多个更新触发",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":103,"title":104,"meta":105},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F09-taskQueue-lifecycle","taskQueue 队列循环的启动与结束",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":107,"title":108,"meta":109},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F10-time-slicing","时间切片是如何实现的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":111,"title":112,"meta":113},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F11-workLoop-full","workLoop 循环完整逻辑",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":115,"title":116,"meta":117},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F12-priority-design","React 中的优先级设计",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":119,"title":120,"meta":121},"\u002Fnotes\u002Freact\u002F03-concurrent-mode\u002F13-lane-model","lane 模型",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":123,"title":124,"meta":125},"\u002Fnotes\u002Freact\u002F04-fiber\u002F01-three-node-types","三种节点对象",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":127,"title":128,"meta":129},"\u002Fnotes\u002Freact\u002F04-fiber\u002F02-fiberRootNode","FiberRootNode",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":131,"title":132,"meta":133},"\u002Fnotes\u002Freact\u002F04-fiber\u002F03-fiber-tree","Fiber 树",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":135,"title":136,"meta":137},"\u002Fnotes\u002Freact\u002F04-fiber\u002F04-initial-mount-build","Fiber 树初始构建过程",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":139,"title":140,"meta":141},"\u002Fnotes\u002Freact\u002F04-fiber\u002F05-workLoopConcurrent","workLoopConcurrent",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":143,"title":144,"meta":145},"\u002Fnotes\u002Freact\u002F04-fiber\u002F06-stack-and-workInProgress","栈结构 与 workInProgress",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":147,"title":148,"meta":149},"\u002Fnotes\u002Freact\u002F04-fiber\u002F07-executionContext","执行上下文 executionContext",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":151,"title":152,"meta":153},"\u002Fnotes\u002Freact\u002F04-fiber\u002F08-update-lanes","update lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":155,"title":156,"meta":157},"\u002Fnotes\u002Freact\u002F04-fiber\u002F09-render-lanes","render lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":159,"title":160,"meta":161},"\u002Fnotes\u002Freact\u002F04-fiber\u002F10-fiber-lanes","fiber lanes",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":163,"title":164,"meta":165},"\u002Fnotes\u002Freact\u002F04-fiber\u002F11-flags-appendix","附录：flags",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":167,"title":168,"meta":169},"\u002Fnotes\u002Freact\u002F05-hooks\u002F01-background","hook 背景",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":171,"title":172,"meta":173},"\u002Fnotes\u002Freact\u002F05-hooks\u002F02-categories","hook 分类",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":175,"title":176,"meta":177},"\u002Fnotes\u002Freact\u002F05-hooks\u002F03-closures","hook 与闭包",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":179,"title":180,"meta":181},"\u002Fnotes\u002Freact\u002F05-hooks\u002F04-hooks-and-fiber","hook 与 fiber",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":183,"title":184,"meta":185},"\u002Fnotes\u002Freact\u002F05-hooks\u002F05-renderWithHooks","renderWithHooks",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":187,"title":188,"meta":189},"\u002Fnotes\u002Freact\u002F05-hooks\u002F06-init-state-hook","初始化 State Hook",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":191,"title":192,"meta":193},"\u002Fnotes\u002Freact\u002F05-hooks\u002F07-init-effect-hook","初始化 effect Hook",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":195,"title":196,"meta":197},"\u002Fnotes\u002Freact\u002F05-hooks\u002F08-circular-linked-list","环形链表详解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":199,"title":200,"meta":201},"\u002Fnotes\u002Freact\u002F05-hooks\u002F09-useReducer-vs-useState","useReducer 与 useState 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":203,"title":204,"meta":205},"\u002Fnotes\u002Freact\u002F05-hooks\u002F10-update-linked-list","update 链表",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":207,"title":208,"meta":209},"\u002Fnotes\u002Freact\u002F05-hooks\u002F11-mount-state-updates","初始阶段的状态更新",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":211,"title":212,"meta":213},"\u002Fnotes\u002Freact\u002F05-hooks\u002F12-baseQueue-vs-pending","baseQueue 与 queue.pending",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":215,"title":216,"meta":217},"\u002Fnotes\u002Freact\u002F05-hooks\u002F13-dispatch-in-update","更新阶段的 dispatch",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":219,"title":220,"meta":221},"\u002Fnotes\u002Freact\u002F05-hooks\u002F14-commitRoot","commitRoot",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":223,"title":224,"meta":225},"\u002Fnotes\u002Freact\u002F06-diff\u002F01-update-overview","React 更新机制概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":227,"title":228,"meta":229},"\u002Fnotes\u002Freact\u002F06-diff\u002F02-diff-strategy","diff 策略",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":231,"title":232,"meta":233},"\u002Fnotes\u002Freact\u002F06-diff\u002F03-node-compare","节点比较方式",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":235,"title":236,"meta":237},"\u002Fnotes\u002Freact\u002F06-diff\u002F04-reconcileChildFibers","reconcileChildFibers",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":239,"title":240,"meta":241},"\u002Fnotes\u002Freact\u002F06-diff\u002F05-reconcileSingleElement","reconcileSingleElement",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":243,"title":244,"meta":245},"\u002Fnotes\u002Freact\u002F06-diff\u002F06-reconcileChildrenArray","reconcileChildrenArray",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":247,"title":248,"meta":249},"\u002Fnotes\u002Freact\u002F06-diff\u002F07-why-not-number-key","为什么不建议使用数字作为 key",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":251,"title":252,"meta":253},"\u002Fnotes\u002Freact\u002F07-event-system\u002F01-overview","事件系统概述",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":255,"title":256,"meta":257},"\u002Fnotes\u002Freact\u002F07-event-system\u002F02-event-plugin","事件插件",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":259,"title":260,"meta":261},"\u002Fnotes\u002Freact\u002F07-event-system\u002F03-event-pooling","事件池",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":263,"title":264,"meta":265},"\u002Fnotes\u002Freact\u002F07-event-system\u002F04-root-listeners","根节点事件绑定",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":267,"title":268,"meta":269},"\u002Fnotes\u002Freact\u002F07-event-system\u002F05-event-dispatch","事件触发",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":271,"title":272,"meta":273},"\u002Fnotes\u002Freact\u002F08-interview\u002F01-useEffect-vs-useLayoutEffect","useEffect 与 useLayoutEffect 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":275,"title":276,"meta":277},"\u002Fnotes\u002Freact\u002F08-interview\u002F02-why-no-conditional-hooks","为什么 hook 不能写在条件判断里",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":279,"title":280,"meta":281},"\u002Fnotes\u002Freact\u002F08-interview\u002F03-understanding-concurrency","聊聊在 React 中，你对并发模式的理解",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":283,"title":284,"meta":285},"\u002Fnotes\u002Freact\u002F08-interview\u002F04-update-mechanism","聊聊 React 的更新机制原理",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":287,"title":288,"meta":289},"\u002Fnotes\u002Freact\u002F08-interview\u002F05-setState-sync-or-async","setState 是同步还是异步的？",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":291,"title":292,"meta":293},"\u002Fnotes\u002Freact\u002F08-interview\u002F06-useState-vs-useReducer","聊聊 useState 与 useReducer 的区别",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":295,"title":296,"meta":297},"\u002Fnotes\u002Freact\u002F08-interview\u002F07-closure-trap","聊聊闭包陷阱问题，以及如何解决",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":299,"title":300,"meta":301},"\u002Fnotes\u002Freact\u002F08-interview\u002F08-time-slicing-details","时间分片是如何实现的（任务拆分\u002F中断\u002F恢复）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":303,"title":304,"meta":305},"\u002Fnotes\u002Freact\u002F08-interview\u002F09-batched-updates-useState","聊聊 useState 的批处理更新机制",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":307,"title":308,"meta":309},"\u002Fnotes\u002Freact\u002F08-interview\u002F10-jsx-to-dom","JSX 是如何转变成为真实 DOM 的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":311,"title":312,"meta":313},"\u002Fnotes\u002Freact\u002F08-interview\u002F11-useCallback-impl","useCallback 的实现原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":315,"title":316,"meta":317},"\u002Fnotes\u002Freact\u002F08-interview\u002F12-scheduling-mechanism","详细聊聊 React 的调度机制",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":319,"title":320,"meta":321},"\u002Fnotes\u002Freact\u002F08-interview\u002F13-priority-and-lanes","聊聊 React 的优先级机制（Lane 模型）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":323,"title":324,"meta":325},"\u002Fnotes\u002Freact\u002F08-interview\u002F14-diff-algorithm","React 的 Diff 算法是什么样的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":327,"title":328,"meta":329},"\u002Fnotes\u002Freact\u002F08-interview\u002F15-event-system","详细聊聊 React 的事件系统是如何实现的",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":331,"title":332,"meta":333},"\u002Fnotes\u002Freact\u002F08-interview\u002F16-portals-bubbling","React Portals 上的事件是否会冒泡到父组件，原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":335,"title":336,"meta":337},"\u002Fnotes\u002Freact\u002F08-interview\u002F17-useEffect-impl","useEffect 的实现原理是什么",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":339,"title":340,"meta":341},"\u002Fnotes\u002Freact\u002F08-interview\u002F18-useContext-impl","请聊聊 useContext 的实现原理",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":343,"title":344,"meta":345},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F01-automatic-batching-and-flushsync","React 18 自动批处理（Automatic Batching）与 flushSync",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":347,"title":348,"meta":349},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F02-strictmode-and-idempotent-effects","React StrictMode：为什么会“双调用”？（源码\u002F机制视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":351,"title":352,"meta":353},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F03-transition-useTransition-useDeferredValue","Transition：startTransition \u002F useTransition \u002F useDeferredValue（机制视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":355,"title":356,"meta":357},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F04-suspense-loading-boundary-design","Suspense：加载态边界如何设计（机制\u002F架构视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":359,"title":360,"meta":361},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice\u002F05-error-boundary-reporting-and-recovery","Error Boundary：兜底、重试与上报（自研 vs Sentry）（机制\u002F架构视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":363,"title":364,"meta":365},"\u002Fnotes\u002Freact\u002F09-react-18-in-practice","React 18 实战（并发特性与默认行为）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":367,"title":368,"meta":369},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F01-routing-and-url-state-mental-model","路由与 URL State：统一心智模型（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":371,"title":372,"meta":373},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F02-tanstack-router-route-tree-search-loader-prefetch","TanStack Router（Vite \u002F SPA）：Route Tree \u002F Search \u002F Loader \u002F Prefetch（落地篇）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":375,"title":376,"meta":377},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation\u002F03-next-app-router-segments-layout-loading-error-not-found-prefetch","Next.js App Router：Segments \u002F Layouts \u002F Loading-Error-NotFound \u002F Prefetch（落地篇）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":379,"title":380,"meta":381},"\u002Fnotes\u002Freact\u002F10-routing-and-navigation","路由与导航（TanStack Router \u002F Next App Router）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":383,"title":384,"meta":385},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F01-state-layering-ui-server-url-global","状态分层：UI \u002F Server \u002F URL \u002F Global（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":387,"title":388,"meta":389},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F02-tanstack-query-caching-and-invalidation","TanStack Query：缓存模型与失效策略（Caching & Invalidation）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":391,"title":392,"meta":393},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F03-optimistic-updates-and-consistency","TanStack Query：乐观更新与一致性（Optimistic Updates & Consistency）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":395,"title":396,"meta":397},"\u002Fnotes\u002Freact\u002F11-data-layer\u002F04-form-architecture-react-hook-form-validation-performance-testability","表单架构：React Hook Form 的受控\u002F非受控、校验、性能与可测试性（架构师视角）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":399,"title":400,"meta":401},"\u002Fnotes\u002Freact\u002F11-data-layer","数据层（Server State \u002F 表单 \u002F 状态分层）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":403,"title":404,"meta":405},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F01-hydration-mismatch","Hydration mismatch（React \u002F Next.js）：成因、检测、排查清单与工程化规避",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":407,"title":408,"meta":409},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F01-nextjs-cache-revalidate-consistency-online-not-updating","Next.js 缓存\u002F重验证与一致性：避免「线上怎么不更新」事故（App Router）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":411,"title":412,"meta":413},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F02-csr-ssr-ssg-isr-how-to-choose","CSR vs SSR vs SSG vs ISR：怎么选？边界是什么？（体验 + 成本 + 一致性）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":415,"title":416,"meta":417},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery\u002F04-streaming-ssr-with-suspense","Streaming SSR + Suspense：提升前端感知性能的利器",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":419,"title":420,"meta":421},"\u002Fnotes\u002Freact\u002F12-rendering-and-delivery","渲染与交付（CSR\u002FSSR\u002FStreaming\u002FHydration\u002F缓存）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":423,"title":424,"meta":425},"\u002Fnotes\u002Freact\u002F13-production-readiness\u002F01-observability-logging-metrics-tracing","前端可观测性体系：日志、指标与链路追踪",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":427,"title":428,"meta":429},"\u002Fnotes\u002Freact\u002F13-production-readiness\u002F02-auth-and-web-security","鉴权与 Web 安全：OAuth, JWT, XSS, CSRF, CSP",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":431,"title":432,"meta":433},"\u002Fnotes\u002Freact\u002F13-production-readiness","生产可用性（错误\u002F可观测\u002F鉴权\u002F安全）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":435,"title":436,"meta":437},"\u002Fnotes\u002Freact\u002F14-performance\u002F01-performance-playbook-and-metrics","前端性能定位 Playbook：从指标到归因",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":439,"title":440,"meta":441},"\u002Fnotes\u002Freact\u002F14-performance\u002F02-rendering-optimization-memo-context-virtualization","React 渲染性能优化：Memo, Context, 与虚拟化",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":443,"title":444,"meta":445},"\u002Fnotes\u002Freact\u002F14-performance\u002F03-asset-and-bundle-optimization","资源与 Bundle 优化：代码分割、图片与 CDN",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":447,"title":448,"meta":449},"\u002Fnotes\u002Freact\u002F14-performance","性能体系（定位 → 优化 → 度量）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":451,"title":452,"meta":453},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F01-component-system-and-design-system","组件体系与设计系统：构建规模化前端的基石",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":455,"title":456,"meta":457},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F02-testing-strategy-rtl-e2e-testability","前端测试体系：RTL, E2E 与可测性设计",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":459,"title":460,"meta":461},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F03-monorepo-and-dependency-management","Monorepo 与依赖治理：pnpm 和 Turborepo",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":463,"title":464,"meta":465},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F04-cicd-and-quality-gates","CI\u002FCD 与质量门禁：构建可靠的自动化流程",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":467,"title":468,"meta":469},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture\u002F05-bff-and-api-design","BFF 与 API 设计：前端架构师的视角",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":471,"title":472,"meta":473},"\u002Fnotes\u002Freact\u002F15-engineering-and-architecture","工程与架构治理（规模化）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":475,"title":476,"meta":477},"\u002Fnotes\u002Freact\u002F16-advanced\u002F01-rsc-and-server-actions-deep-dive","RSC\u002FServer Actions 深水区：边界、约束与缓存一致性",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":479,"title":480,"meta":481},"\u002Fnotes\u002Freact\u002F16-advanced\u002F02-micro-frontend-governance","微前端治理：样式、路由与通信",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":483,"title":484,"meta":485},"\u002Fnotes\u002Freact\u002F16-advanced\u002F03-realtime-and-offline","实时与离线：WebSocket, PWA 与 Service Worker",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":487,"title":488,"meta":489},"\u002Fnotes\u002Freact\u002F16-advanced\u002F04-a11y-i18n-compliance","a11y, i18n 与合规：构建负责任的全球化应用",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"path":491,"title":492,"meta":493},"\u002Fnotes\u002Freact\u002F16-advanced","进阶专题（按业务需要选做）",{"date":-1,"tags":-1,"summary":-1,"lastUpdated":21},{"id":495,"type":496,"sourcePath":497,"routePath":443,"path":443,"title":444,"updatedAt":21,"meta":498,"body":500,"toc":2565},"bm90ZTpub3Rlcy9yZWFjdC8xNC1wZXJmb3JtYW5jZS8wMy1hc3NldC1hbmQtYnVuZGxlLW9wdGltaXphdGlvbi5tZA","note","notes\u002Freact\u002F14-performance\u002F03-asset-and-bundle-optimization.md",{"id":495,"type":496,"sourcePath":497,"slug":499,"title":444,"updatedAt":21,"lastUpdated":21},"react\u002F14-performance\u002F03-asset-and-bundle-optimization",{"type":501,"children":502},"root",[503,511,527,531,538,543,550,555,563,1385,1391,1396,1555,1558,1564,1569,1575,1759,1777,1949,1955,2204,2210,2215,2256,2259,2265,2270,2284,2289,2489,2492,2498,2559],{"type":504,"tag":505,"props":506,"children":508},"element","h1",{"id":507},"资源与-bundle-优化代码分割图片与-cdn",[509],{"type":510,"value":444},"text",{"type":504,"tag":512,"props":513,"children":514},"blockquote",{},[515],{"type":504,"tag":516,"props":517,"children":518},"p",{},[519,525],{"type":504,"tag":520,"props":521,"children":522},"strong",{},[523],{"type":510,"value":524},"一句话结论",{"type":510,"value":526},"：通过精细化的代码分割减小初始 JS 体积，实施现代化的图片格式与加载策略，并结合 CDN 全球缓存，是从根本上提升页面加载性能（尤其是 LCP）的关键工程手段。",{"type":504,"tag":528,"props":529,"children":530},"hr",{},[],{"type":504,"tag":532,"props":533,"children":535},"h2",{"id":534},"_1-javascript-bundle-优化",[536],{"type":510,"value":537},"1. JavaScript Bundle 优化",{"type":504,"tag":516,"props":539,"children":540},{},[541],{"type":510,"value":542},"巨大的 JS bundle 是拖慢页面加载和交互的主要元凶。浏览器需要下载、解析、编译和执行这些脚本，这个过程会长时间阻塞主线程。",{"type":504,"tag":544,"props":545,"children":547},"h3",{"id":546},"a-代码分割-code-splitting",[548],{"type":510,"value":549},"A. 代码分割 (Code Splitting)",{"type":504,"tag":516,"props":551,"children":552},{},[553],{"type":510,"value":554},"代码分割是将一个巨大的 JS bundle 拆分成多个小块（chunks）的技术。用户在首次访问页面时，只加载当前页面必需的核心代码。其他代码（例如，非首屏组件、次要路由、特定功能的库）则按需加载。",{"type":504,"tag":516,"props":556,"children":557},{},[558],{"type":504,"tag":520,"props":559,"children":560},{},[561],{"type":510,"value":562},"实现方式：",{"type":504,"tag":564,"props":565,"children":566},"ol",{},[567,1028],{"type":504,"tag":568,"props":569,"children":570},"li",{},[571,576,578],{"type":504,"tag":520,"props":572,"children":573},{},[574],{"type":510,"value":575},"基于路由的分割",{"type":510,"value":577},"：最常见也最有效的方式。每个页面（路由）对应一个独立的 JS chunk。当用户导航到新页面时，才加载该页面的代码。现代框架如 Next.js 和 TanStack Router 都内置了此功能。",{"type":504,"tag":579,"props":580,"children":585},"pre",{"className":581,"code":582,"language":583,"meta":584,"style":584},"language-jsx shiki shiki-themes github-light github-dark","\u002F\u002F 使用 React.lazy 和 Suspense\nimport { lazy, Suspense } from 'react';\n\nconst AdminPage = lazy(() => import('.\u002Fpages\u002FAdminPage')); \u002F\u002F AdminPage.js 会被打包成一个独立的 chunk\nconst HomePage = lazy(() => import('.\u002Fpages\u002FHomePage'));\n\nfunction App() {\n  return (\n    \u003CRouter>\n      \u003CSuspense fallback={\u003Cdiv>Loading page...\u003C\u002Fdiv>}>\n        \u003CSwitch>\n          \u003CRoute path=\"\u002Fadmin\" component={AdminPage} \u002F>\n          \u003CRoute path=\"\u002F\" component={HomePage} \u002F>\n        \u003C\u002FSwitch>\n      \u003C\u002FSuspense>\n    \u003C\u002FRouter>\n  );\n}\n","jsx","",[586],{"type":504,"tag":587,"props":588,"children":589},"code",{"__ignoreMap":584},[590,602,634,644,705,752,760,779,793,812,861,879,921,959,976,993,1010,1019],{"type":504,"tag":591,"props":592,"children":595},"span",{"class":593,"line":594},"line",1,[596],{"type":504,"tag":591,"props":597,"children":599},{"style":598},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[600],{"type":510,"value":601},"\u002F\u002F 使用 React.lazy 和 Suspense\n",{"type":504,"tag":591,"props":603,"children":605},{"class":593,"line":604},2,[606,612,618,623,629],{"type":504,"tag":591,"props":607,"children":609},{"style":608},"--shiki-default:#D73A49;--shiki-dark:#F97583",[610],{"type":510,"value":611},"import",{"type":504,"tag":591,"props":613,"children":615},{"style":614},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[616],{"type":510,"value":617}," { lazy, Suspense } ",{"type":504,"tag":591,"props":619,"children":620},{"style":608},[621],{"type":510,"value":622},"from",{"type":504,"tag":591,"props":624,"children":626},{"style":625},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[627],{"type":510,"value":628}," 'react'",{"type":504,"tag":591,"props":630,"children":631},{"style":614},[632],{"type":510,"value":633},";\n",{"type":504,"tag":591,"props":635,"children":637},{"class":593,"line":636},3,[638],{"type":504,"tag":591,"props":639,"children":641},{"emptyLinePlaceholder":640},true,[642],{"type":510,"value":643},"\n",{"type":504,"tag":591,"props":645,"children":647},{"class":593,"line":646},4,[648,653,659,664,670,675,680,685,690,695,700],{"type":504,"tag":591,"props":649,"children":650},{"style":608},[651],{"type":510,"value":652},"const",{"type":504,"tag":591,"props":654,"children":656},{"style":655},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[657],{"type":510,"value":658}," AdminPage",{"type":504,"tag":591,"props":660,"children":661},{"style":608},[662],{"type":510,"value":663}," =",{"type":504,"tag":591,"props":665,"children":667},{"style":666},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[668],{"type":510,"value":669}," lazy",{"type":504,"tag":591,"props":671,"children":672},{"style":614},[673],{"type":510,"value":674},"(() ",{"type":504,"tag":591,"props":676,"children":677},{"style":608},[678],{"type":510,"value":679},"=>",{"type":504,"tag":591,"props":681,"children":682},{"style":608},[683],{"type":510,"value":684}," import",{"type":504,"tag":591,"props":686,"children":687},{"style":614},[688],{"type":510,"value":689},"(",{"type":504,"tag":591,"props":691,"children":692},{"style":625},[693],{"type":510,"value":694},"'.\u002Fpages\u002FAdminPage'",{"type":504,"tag":591,"props":696,"children":697},{"style":614},[698],{"type":510,"value":699},")); ",{"type":504,"tag":591,"props":701,"children":702},{"style":598},[703],{"type":510,"value":704},"\u002F\u002F AdminPage.js 会被打包成一个独立的 chunk\n",{"type":504,"tag":591,"props":706,"children":708},{"class":593,"line":707},5,[709,713,718,722,726,730,734,738,742,747],{"type":504,"tag":591,"props":710,"children":711},{"style":608},[712],{"type":510,"value":652},{"type":504,"tag":591,"props":714,"children":715},{"style":655},[716],{"type":510,"value":717}," HomePage",{"type":504,"tag":591,"props":719,"children":720},{"style":608},[721],{"type":510,"value":663},{"type":504,"tag":591,"props":723,"children":724},{"style":666},[725],{"type":510,"value":669},{"type":504,"tag":591,"props":727,"children":728},{"style":614},[729],{"type":510,"value":674},{"type":504,"tag":591,"props":731,"children":732},{"style":608},[733],{"type":510,"value":679},{"type":504,"tag":591,"props":735,"children":736},{"style":608},[737],{"type":510,"value":684},{"type":504,"tag":591,"props":739,"children":740},{"style":614},[741],{"type":510,"value":689},{"type":504,"tag":591,"props":743,"children":744},{"style":625},[745],{"type":510,"value":746},"'.\u002Fpages\u002FHomePage'",{"type":504,"tag":591,"props":748,"children":749},{"style":614},[750],{"type":510,"value":751},"));\n",{"type":504,"tag":591,"props":753,"children":755},{"class":593,"line":754},6,[756],{"type":504,"tag":591,"props":757,"children":758},{"emptyLinePlaceholder":640},[759],{"type":510,"value":643},{"type":504,"tag":591,"props":761,"children":763},{"class":593,"line":762},7,[764,769,774],{"type":504,"tag":591,"props":765,"children":766},{"style":608},[767],{"type":510,"value":768},"function",{"type":504,"tag":591,"props":770,"children":771},{"style":666},[772],{"type":510,"value":773}," App",{"type":504,"tag":591,"props":775,"children":776},{"style":614},[777],{"type":510,"value":778},"() {\n",{"type":504,"tag":591,"props":780,"children":782},{"class":593,"line":781},8,[783,788],{"type":504,"tag":591,"props":784,"children":785},{"style":608},[786],{"type":510,"value":787},"  return",{"type":504,"tag":591,"props":789,"children":790},{"style":614},[791],{"type":510,"value":792}," (\n",{"type":504,"tag":591,"props":794,"children":796},{"class":593,"line":795},9,[797,802,807],{"type":504,"tag":591,"props":798,"children":799},{"style":614},[800],{"type":510,"value":801},"    \u003C",{"type":504,"tag":591,"props":803,"children":804},{"style":655},[805],{"type":510,"value":806},"Router",{"type":504,"tag":591,"props":808,"children":809},{"style":614},[810],{"type":510,"value":811},">\n",{"type":504,"tag":591,"props":813,"children":815},{"class":593,"line":814},10,[816,821,826,831,836,841,847,852,856],{"type":504,"tag":591,"props":817,"children":818},{"style":614},[819],{"type":510,"value":820},"      \u003C",{"type":504,"tag":591,"props":822,"children":823},{"style":655},[824],{"type":510,"value":825},"Suspense",{"type":504,"tag":591,"props":827,"children":828},{"style":666},[829],{"type":510,"value":830}," fallback",{"type":504,"tag":591,"props":832,"children":833},{"style":608},[834],{"type":510,"value":835},"=",{"type":504,"tag":591,"props":837,"children":838},{"style":614},[839],{"type":510,"value":840},"{\u003C",{"type":504,"tag":591,"props":842,"children":844},{"style":843},"--shiki-default:#22863A;--shiki-dark:#85E89D",[845],{"type":510,"value":846},"div",{"type":504,"tag":591,"props":848,"children":849},{"style":614},[850],{"type":510,"value":851},">Loading page...\u003C\u002F",{"type":504,"tag":591,"props":853,"children":854},{"style":843},[855],{"type":510,"value":846},{"type":504,"tag":591,"props":857,"children":858},{"style":614},[859],{"type":510,"value":860},">}>\n",{"type":504,"tag":591,"props":862,"children":864},{"class":593,"line":863},11,[865,870,875],{"type":504,"tag":591,"props":866,"children":867},{"style":614},[868],{"type":510,"value":869},"        \u003C",{"type":504,"tag":591,"props":871,"children":872},{"style":655},[873],{"type":510,"value":874},"Switch",{"type":504,"tag":591,"props":876,"children":877},{"style":614},[878],{"type":510,"value":811},{"type":504,"tag":591,"props":880,"children":882},{"class":593,"line":881},12,[883,888,893,898,902,907,912,916],{"type":504,"tag":591,"props":884,"children":885},{"style":614},[886],{"type":510,"value":887},"          \u003C",{"type":504,"tag":591,"props":889,"children":890},{"style":655},[891],{"type":510,"value":892},"Route",{"type":504,"tag":591,"props":894,"children":895},{"style":666},[896],{"type":510,"value":897}," path",{"type":504,"tag":591,"props":899,"children":900},{"style":608},[901],{"type":510,"value":835},{"type":504,"tag":591,"props":903,"children":904},{"style":625},[905],{"type":510,"value":906},"\"\u002Fadmin\"",{"type":504,"tag":591,"props":908,"children":909},{"style":666},[910],{"type":510,"value":911}," component",{"type":504,"tag":591,"props":913,"children":914},{"style":608},[915],{"type":510,"value":835},{"type":504,"tag":591,"props":917,"children":918},{"style":614},[919],{"type":510,"value":920},"{AdminPage} \u002F>\n",{"type":504,"tag":591,"props":922,"children":924},{"class":593,"line":923},13,[925,929,933,937,941,946,950,954],{"type":504,"tag":591,"props":926,"children":927},{"style":614},[928],{"type":510,"value":887},{"type":504,"tag":591,"props":930,"children":931},{"style":655},[932],{"type":510,"value":892},{"type":504,"tag":591,"props":934,"children":935},{"style":666},[936],{"type":510,"value":897},{"type":504,"tag":591,"props":938,"children":939},{"style":608},[940],{"type":510,"value":835},{"type":504,"tag":591,"props":942,"children":943},{"style":625},[944],{"type":510,"value":945},"\"\u002F\"",{"type":504,"tag":591,"props":947,"children":948},{"style":666},[949],{"type":510,"value":911},{"type":504,"tag":591,"props":951,"children":952},{"style":608},[953],{"type":510,"value":835},{"type":504,"tag":591,"props":955,"children":956},{"style":614},[957],{"type":510,"value":958},"{HomePage} \u002F>\n",{"type":504,"tag":591,"props":960,"children":962},{"class":593,"line":961},14,[963,968,972],{"type":504,"tag":591,"props":964,"children":965},{"style":614},[966],{"type":510,"value":967},"        \u003C\u002F",{"type":504,"tag":591,"props":969,"children":970},{"style":655},[971],{"type":510,"value":874},{"type":504,"tag":591,"props":973,"children":974},{"style":614},[975],{"type":510,"value":811},{"type":504,"tag":591,"props":977,"children":979},{"class":593,"line":978},15,[980,985,989],{"type":504,"tag":591,"props":981,"children":982},{"style":614},[983],{"type":510,"value":984},"      \u003C\u002F",{"type":504,"tag":591,"props":986,"children":987},{"style":655},[988],{"type":510,"value":825},{"type":504,"tag":591,"props":990,"children":991},{"style":614},[992],{"type":510,"value":811},{"type":504,"tag":591,"props":994,"children":996},{"class":593,"line":995},16,[997,1002,1006],{"type":504,"tag":591,"props":998,"children":999},{"style":614},[1000],{"type":510,"value":1001},"    \u003C\u002F",{"type":504,"tag":591,"props":1003,"children":1004},{"style":655},[1005],{"type":510,"value":806},{"type":504,"tag":591,"props":1007,"children":1008},{"style":614},[1009],{"type":510,"value":811},{"type":504,"tag":591,"props":1011,"children":1013},{"class":593,"line":1012},17,[1014],{"type":504,"tag":591,"props":1015,"children":1016},{"style":614},[1017],{"type":510,"value":1018},"  );\n",{"type":504,"tag":591,"props":1020,"children":1022},{"class":593,"line":1021},18,[1023],{"type":504,"tag":591,"props":1024,"children":1025},{"style":614},[1026],{"type":510,"value":1027},"}\n",{"type":504,"tag":568,"props":1029,"children":1030},{},[1031,1036,1038],{"type":504,"tag":520,"props":1032,"children":1033},{},[1034],{"type":510,"value":1035},"基于组件的分割",{"type":510,"value":1037},"：对于一些重量级但非首屏关键的组件（如复杂的图表库、弹窗、评论区），也可以进行代码分割。",{"type":504,"tag":579,"props":1039,"children":1041},{"className":581,"code":1040,"language":583,"meta":584,"style":584},"const HeavyChart = lazy(() => import('.\u002Fcomponents\u002FHeavyChart'));\n\nfunction Dashboard() {\n  const [showChart, setShowChart] = useState(false);\n\n  return (\n    \u003Cdiv>\n      \u003Cbutton onClick={() => setShowChart(true)}>Show Chart\u003C\u002Fbutton>\n      {showChart && (\n        \u003CSuspense fallback={\u003Cdiv>Loading chart...\u003C\u002Fdiv>}>\n          \u003CHeavyChart \u002F>\n        \u003C\u002FSuspense>\n      )}\n    \u003C\u002Fdiv>\n  );\n}\n",[1042],{"type":504,"tag":587,"props":1043,"children":1044},{"__ignoreMap":584},[1045,1090,1097,1113,1169,1176,1187,1202,1259,1276,1316,1333,1348,1356,1371,1378],{"type":504,"tag":591,"props":1046,"children":1047},{"class":593,"line":594},[1048,1052,1057,1061,1065,1069,1073,1077,1081,1086],{"type":504,"tag":591,"props":1049,"children":1050},{"style":608},[1051],{"type":510,"value":652},{"type":504,"tag":591,"props":1053,"children":1054},{"style":655},[1055],{"type":510,"value":1056}," HeavyChart",{"type":504,"tag":591,"props":1058,"children":1059},{"style":608},[1060],{"type":510,"value":663},{"type":504,"tag":591,"props":1062,"children":1063},{"style":666},[1064],{"type":510,"value":669},{"type":504,"tag":591,"props":1066,"children":1067},{"style":614},[1068],{"type":510,"value":674},{"type":504,"tag":591,"props":1070,"children":1071},{"style":608},[1072],{"type":510,"value":679},{"type":504,"tag":591,"props":1074,"children":1075},{"style":608},[1076],{"type":510,"value":684},{"type":504,"tag":591,"props":1078,"children":1079},{"style":614},[1080],{"type":510,"value":689},{"type":504,"tag":591,"props":1082,"children":1083},{"style":625},[1084],{"type":510,"value":1085},"'.\u002Fcomponents\u002FHeavyChart'",{"type":504,"tag":591,"props":1087,"children":1088},{"style":614},[1089],{"type":510,"value":751},{"type":504,"tag":591,"props":1091,"children":1092},{"class":593,"line":604},[1093],{"type":504,"tag":591,"props":1094,"children":1095},{"emptyLinePlaceholder":640},[1096],{"type":510,"value":643},{"type":504,"tag":591,"props":1098,"children":1099},{"class":593,"line":636},[1100,1104,1109],{"type":504,"tag":591,"props":1101,"children":1102},{"style":608},[1103],{"type":510,"value":768},{"type":504,"tag":591,"props":1105,"children":1106},{"style":666},[1107],{"type":510,"value":1108}," Dashboard",{"type":504,"tag":591,"props":1110,"children":1111},{"style":614},[1112],{"type":510,"value":778},{"type":504,"tag":591,"props":1114,"children":1115},{"class":593,"line":646},[1116,1121,1126,1131,1136,1141,1146,1150,1155,1159,1164],{"type":504,"tag":591,"props":1117,"children":1118},{"style":608},[1119],{"type":510,"value":1120},"  const",{"type":504,"tag":591,"props":1122,"children":1123},{"style":614},[1124],{"type":510,"value":1125}," [",{"type":504,"tag":591,"props":1127,"children":1128},{"style":655},[1129],{"type":510,"value":1130},"showChart",{"type":504,"tag":591,"props":1132,"children":1133},{"style":614},[1134],{"type":510,"value":1135},", ",{"type":504,"tag":591,"props":1137,"children":1138},{"style":655},[1139],{"type":510,"value":1140},"setShowChart",{"type":504,"tag":591,"props":1142,"children":1143},{"style":614},[1144],{"type":510,"value":1145},"] ",{"type":504,"tag":591,"props":1147,"children":1148},{"style":608},[1149],{"type":510,"value":835},{"type":504,"tag":591,"props":1151,"children":1152},{"style":666},[1153],{"type":510,"value":1154}," useState",{"type":504,"tag":591,"props":1156,"children":1157},{"style":614},[1158],{"type":510,"value":689},{"type":504,"tag":591,"props":1160,"children":1161},{"style":655},[1162],{"type":510,"value":1163},"false",{"type":504,"tag":591,"props":1165,"children":1166},{"style":614},[1167],{"type":510,"value":1168},");\n",{"type":504,"tag":591,"props":1170,"children":1171},{"class":593,"line":707},[1172],{"type":504,"tag":591,"props":1173,"children":1174},{"emptyLinePlaceholder":640},[1175],{"type":510,"value":643},{"type":504,"tag":591,"props":1177,"children":1178},{"class":593,"line":754},[1179,1183],{"type":504,"tag":591,"props":1180,"children":1181},{"style":608},[1182],{"type":510,"value":787},{"type":504,"tag":591,"props":1184,"children":1185},{"style":614},[1186],{"type":510,"value":792},{"type":504,"tag":591,"props":1188,"children":1189},{"class":593,"line":762},[1190,1194,1198],{"type":504,"tag":591,"props":1191,"children":1192},{"style":614},[1193],{"type":510,"value":801},{"type":504,"tag":591,"props":1195,"children":1196},{"style":843},[1197],{"type":510,"value":846},{"type":504,"tag":591,"props":1199,"children":1200},{"style":614},[1201],{"type":510,"value":811},{"type":504,"tag":591,"props":1203,"children":1204},{"class":593,"line":781},[1205,1209,1214,1219,1223,1228,1232,1237,1241,1246,1251,1255],{"type":504,"tag":591,"props":1206,"children":1207},{"style":614},[1208],{"type":510,"value":820},{"type":504,"tag":591,"props":1210,"children":1211},{"style":843},[1212],{"type":510,"value":1213},"button",{"type":504,"tag":591,"props":1215,"children":1216},{"style":666},[1217],{"type":510,"value":1218}," onClick",{"type":504,"tag":591,"props":1220,"children":1221},{"style":608},[1222],{"type":510,"value":835},{"type":504,"tag":591,"props":1224,"children":1225},{"style":614},[1226],{"type":510,"value":1227},"{() ",{"type":504,"tag":591,"props":1229,"children":1230},{"style":608},[1231],{"type":510,"value":679},{"type":504,"tag":591,"props":1233,"children":1234},{"style":666},[1235],{"type":510,"value":1236}," setShowChart",{"type":504,"tag":591,"props":1238,"children":1239},{"style":614},[1240],{"type":510,"value":689},{"type":504,"tag":591,"props":1242,"children":1243},{"style":655},[1244],{"type":510,"value":1245},"true",{"type":504,"tag":591,"props":1247,"children":1248},{"style":614},[1249],{"type":510,"value":1250},")}>Show Chart\u003C\u002F",{"type":504,"tag":591,"props":1252,"children":1253},{"style":843},[1254],{"type":510,"value":1213},{"type":504,"tag":591,"props":1256,"children":1257},{"style":614},[1258],{"type":510,"value":811},{"type":504,"tag":591,"props":1260,"children":1261},{"class":593,"line":795},[1262,1267,1272],{"type":504,"tag":591,"props":1263,"children":1264},{"style":614},[1265],{"type":510,"value":1266},"      {showChart ",{"type":504,"tag":591,"props":1268,"children":1269},{"style":608},[1270],{"type":510,"value":1271},"&&",{"type":504,"tag":591,"props":1273,"children":1274},{"style":614},[1275],{"type":510,"value":792},{"type":504,"tag":591,"props":1277,"children":1278},{"class":593,"line":814},[1279,1283,1287,1291,1295,1299,1303,1308,1312],{"type":504,"tag":591,"props":1280,"children":1281},{"style":614},[1282],{"type":510,"value":869},{"type":504,"tag":591,"props":1284,"children":1285},{"style":655},[1286],{"type":510,"value":825},{"type":504,"tag":591,"props":1288,"children":1289},{"style":666},[1290],{"type":510,"value":830},{"type":504,"tag":591,"props":1292,"children":1293},{"style":608},[1294],{"type":510,"value":835},{"type":504,"tag":591,"props":1296,"children":1297},{"style":614},[1298],{"type":510,"value":840},{"type":504,"tag":591,"props":1300,"children":1301},{"style":843},[1302],{"type":510,"value":846},{"type":504,"tag":591,"props":1304,"children":1305},{"style":614},[1306],{"type":510,"value":1307},">Loading chart...\u003C\u002F",{"type":504,"tag":591,"props":1309,"children":1310},{"style":843},[1311],{"type":510,"value":846},{"type":504,"tag":591,"props":1313,"children":1314},{"style":614},[1315],{"type":510,"value":860},{"type":504,"tag":591,"props":1317,"children":1318},{"class":593,"line":863},[1319,1323,1328],{"type":504,"tag":591,"props":1320,"children":1321},{"style":614},[1322],{"type":510,"value":887},{"type":504,"tag":591,"props":1324,"children":1325},{"style":655},[1326],{"type":510,"value":1327},"HeavyChart",{"type":504,"tag":591,"props":1329,"children":1330},{"style":614},[1331],{"type":510,"value":1332}," \u002F>\n",{"type":504,"tag":591,"props":1334,"children":1335},{"class":593,"line":881},[1336,1340,1344],{"type":504,"tag":591,"props":1337,"children":1338},{"style":614},[1339],{"type":510,"value":967},{"type":504,"tag":591,"props":1341,"children":1342},{"style":655},[1343],{"type":510,"value":825},{"type":504,"tag":591,"props":1345,"children":1346},{"style":614},[1347],{"type":510,"value":811},{"type":504,"tag":591,"props":1349,"children":1350},{"class":593,"line":923},[1351],{"type":504,"tag":591,"props":1352,"children":1353},{"style":614},[1354],{"type":510,"value":1355},"      )}\n",{"type":504,"tag":591,"props":1357,"children":1358},{"class":593,"line":961},[1359,1363,1367],{"type":504,"tag":591,"props":1360,"children":1361},{"style":614},[1362],{"type":510,"value":1001},{"type":504,"tag":591,"props":1364,"children":1365},{"style":843},[1366],{"type":510,"value":846},{"type":504,"tag":591,"props":1368,"children":1369},{"style":614},[1370],{"type":510,"value":811},{"type":504,"tag":591,"props":1372,"children":1373},{"class":593,"line":978},[1374],{"type":504,"tag":591,"props":1375,"children":1376},{"style":614},[1377],{"type":510,"value":1018},{"type":504,"tag":591,"props":1379,"children":1380},{"class":593,"line":995},[1381],{"type":504,"tag":591,"props":1382,"children":1383},{"style":614},[1384],{"type":510,"value":1027},{"type":504,"tag":544,"props":1386,"children":1388},{"id":1387},"b-bundle-分析与优化",[1389],{"type":510,"value":1390},"B. Bundle 分析与优化",{"type":504,"tag":516,"props":1392,"children":1393},{},[1394],{"type":510,"value":1395},"要知道优化什么，首先得知道你的 bundle 里有什么。",{"type":504,"tag":1397,"props":1398,"children":1399},"ul",{},[1400,1426,1436],{"type":504,"tag":568,"props":1401,"children":1402},{},[1403,1408,1410,1416,1418,1424],{"type":504,"tag":520,"props":1404,"children":1405},{},[1406],{"type":510,"value":1407},"工具",{"type":510,"value":1409},"：",{"type":504,"tag":587,"props":1411,"children":1413},{"className":1412},[],[1414],{"type":510,"value":1415},"webpack-bundle-analyzer",{"type":510,"value":1417}," 或 ",{"type":504,"tag":587,"props":1419,"children":1421},{"className":1420},[],[1422],{"type":510,"value":1423},"vite-plugin-visualizer",{"type":510,"value":1425},"。",{"type":504,"tag":568,"props":1427,"children":1428},{},[1429,1434],{"type":504,"tag":520,"props":1430,"children":1431},{},[1432],{"type":510,"value":1433},"分析",{"type":510,"value":1435},"：运行这些工具会生成一个矩形树图，清晰地展示出每个模块在最终 bundle 中所占的大小。",{"type":504,"tag":568,"props":1437,"children":1438},{},[1439,1444,1446],{"type":504,"tag":520,"props":1440,"children":1441},{},[1442],{"type":510,"value":1443},"常见问题与对策",{"type":510,"value":1445},"：\n",{"type":504,"tag":1397,"props":1447,"children":1448},{},[1449,1497,1530],{"type":504,"tag":568,"props":1450,"children":1451},{},[1452,1457,1459,1465,1466,1472,1474,1480,1482,1488,1490,1495],{"type":504,"tag":520,"props":1453,"children":1454},{},[1455],{"type":510,"value":1456},"巨大的库",{"type":510,"value":1458},"：某个库（如 ",{"type":504,"tag":587,"props":1460,"children":1462},{"className":1461},[],[1463],{"type":510,"value":1464},"lodash",{"type":510,"value":1135},{"type":504,"tag":587,"props":1467,"children":1469},{"className":1468},[],[1470],{"type":510,"value":1471},"moment.js",{"type":510,"value":1473},"）是否被完整引入？尝试只引入需要的模块（",{"type":504,"tag":587,"props":1475,"children":1477},{"className":1476},[],[1478],{"type":510,"value":1479},"import get from 'lodash\u002Fget'",{"type":510,"value":1481},"），或者寻找更轻量的替代品（如用 ",{"type":504,"tag":587,"props":1483,"children":1485},{"className":1484},[],[1486],{"type":510,"value":1487},"date-fns",{"type":510,"value":1489}," 替代 ",{"type":504,"tag":587,"props":1491,"children":1493},{"className":1492},[],[1494],{"type":510,"value":1471},{"type":510,"value":1496},"）。",{"type":504,"tag":568,"props":1498,"children":1499},{},[1500,1505,1507,1513,1514,1520,1522,1528],{"type":504,"tag":520,"props":1501,"children":1502},{},[1503],{"type":510,"value":1504},"重复的依赖",{"type":510,"value":1506},"：同一个库的不同版本是否被多次打包？检查你的 ",{"type":504,"tag":587,"props":1508,"children":1510},{"className":1509},[],[1511],{"type":510,"value":1512},"package-lock.json",{"type":510,"value":1417},{"type":504,"tag":587,"props":1515,"children":1517},{"className":1516},[],[1518],{"type":510,"value":1519},"yarn.lock",{"type":510,"value":1521},"，尝试使用 ",{"type":504,"tag":587,"props":1523,"children":1525},{"className":1524},[],[1526],{"type":510,"value":1527},"npm dedupe",{"type":510,"value":1529}," 或依赖覆盖 (overrides) 来统一版本。",{"type":504,"tag":568,"props":1531,"children":1532},{},[1533,1538,1540,1546,1547,1553],{"type":504,"tag":520,"props":1534,"children":1535},{},[1536],{"type":510,"value":1537},"非必要的 polyfills",{"type":510,"value":1539},"：是否为现代浏览器加载了过多的 polyfills？调整 ",{"type":504,"tag":587,"props":1541,"children":1543},{"className":1542},[],[1544],{"type":510,"value":1545},"babel",{"type":510,"value":1417},{"type":504,"tag":587,"props":1548,"children":1550},{"className":1549},[],[1551],{"type":510,"value":1552},"@vitejs\u002Fplugin-legacy",{"type":510,"value":1554}," 的配置，使其根据目标浏览器按需引入。",{"type":504,"tag":528,"props":1556,"children":1557},{},[],{"type":504,"tag":532,"props":1559,"children":1561},{"id":1560},"_2-图片优化",[1562],{"type":510,"value":1563},"2. 图片优化",{"type":504,"tag":516,"props":1565,"children":1566},{},[1567],{"type":510,"value":1568},"图片是 LCP 指标的最大影响因素之一。未经优化的图片会严重拖慢页面加载。",{"type":504,"tag":544,"props":1570,"children":1572},{"id":1571},"a-选择正确的格式",[1573],{"type":510,"value":1574},"A. 选择正确的格式",{"type":504,"tag":1576,"props":1577,"children":1578},"table",{},[1579,1609],{"type":504,"tag":1580,"props":1581,"children":1582},"thead",{},[1583],{"type":504,"tag":1584,"props":1585,"children":1586},"tr",{},[1587,1594,1599,1604],{"type":504,"tag":1588,"props":1589,"children":1591},"th",{"align":1590},"left",[1592],{"type":510,"value":1593},"格式",{"type":504,"tag":1588,"props":1595,"children":1596},{"align":1590},[1597],{"type":510,"value":1598},"优点",{"type":504,"tag":1588,"props":1600,"children":1601},{"align":1590},[1602],{"type":510,"value":1603},"缺点",{"type":504,"tag":1588,"props":1605,"children":1606},{"align":1590},[1607],{"type":510,"value":1608},"适用场景",{"type":504,"tag":1610,"props":1611,"children":1612},"tbody",{},[1613,1650,1681,1707,1733],{"type":504,"tag":1584,"props":1614,"children":1615},{},[1616,1625,1635,1640],{"type":504,"tag":1617,"props":1618,"children":1619},"td",{"align":1590},[1620],{"type":504,"tag":520,"props":1621,"children":1622},{},[1623],{"type":510,"value":1624},"WebP",{"type":504,"tag":1617,"props":1626,"children":1627},{"align":1590},[1628,1633],{"type":504,"tag":520,"props":1629,"children":1630},{},[1631],{"type":510,"value":1632},"全能选手",{"type":510,"value":1634},"。压缩率极高，支持有损\u002F无损、动图和透明度。",{"type":504,"tag":1617,"props":1636,"children":1637},{"align":1590},[1638],{"type":510,"value":1639},"兼容性问题（基本已解决）。",{"type":504,"tag":1617,"props":1641,"children":1642},{"align":1590},[1643,1648],{"type":504,"tag":520,"props":1644,"children":1645},{},[1646],{"type":510,"value":1647},"首选格式",{"type":510,"value":1649},"。几乎可以替代所有 PNG\u002FJPEG。",{"type":504,"tag":1584,"props":1651,"children":1652},{},[1653,1661,1671,1676],{"type":504,"tag":1617,"props":1654,"children":1655},{"align":1590},[1656],{"type":504,"tag":520,"props":1657,"children":1658},{},[1659],{"type":510,"value":1660},"AVIF",{"type":504,"tag":1617,"props":1662,"children":1663},{"align":1590},[1664,1669],{"type":504,"tag":520,"props":1665,"children":1666},{},[1667],{"type":510,"value":1668},"下一代王者",{"type":510,"value":1670},"。压缩率比 WebP 更高，尤其是对于高保真图像。",{"type":504,"tag":1617,"props":1672,"children":1673},{"align":1590},[1674],{"type":510,"value":1675},"编码耗时较长，兼容性略低于 WebP。",{"type":504,"tag":1617,"props":1677,"children":1678},{"align":1590},[1679],{"type":510,"value":1680},"对质量要求极高的场景（摄影、艺术品）。",{"type":504,"tag":1584,"props":1682,"children":1683},{},[1684,1692,1697,1702],{"type":504,"tag":1617,"props":1685,"children":1686},{"align":1590},[1687],{"type":504,"tag":520,"props":1688,"children":1689},{},[1690],{"type":510,"value":1691},"JPEG",{"type":504,"tag":1617,"props":1693,"children":1694},{"align":1590},[1695],{"type":510,"value":1696},"压缩率高，兼容性好。",{"type":504,"tag":1617,"props":1698,"children":1699},{"align":1590},[1700],{"type":510,"value":1701},"不支持透明度，有损压缩。",{"type":504,"tag":1617,"props":1703,"children":1704},{"align":1590},[1705],{"type":510,"value":1706},"照片、色彩丰富的图片。",{"type":504,"tag":1584,"props":1708,"children":1709},{},[1710,1718,1723,1728],{"type":504,"tag":1617,"props":1711,"children":1712},{"align":1590},[1713],{"type":504,"tag":520,"props":1714,"children":1715},{},[1716],{"type":510,"value":1717},"PNG",{"type":504,"tag":1617,"props":1719,"children":1720},{"align":1590},[1721],{"type":510,"value":1722},"无损压缩，支持透明度。",{"type":504,"tag":1617,"props":1724,"children":1725},{"align":1590},[1726],{"type":510,"value":1727},"文件体积较大。",{"type":504,"tag":1617,"props":1729,"children":1730},{"align":1590},[1731],{"type":510,"value":1732},"Logo、图标、需要透明背景的图片。",{"type":504,"tag":1584,"props":1734,"children":1735},{},[1736,1744,1749,1754],{"type":504,"tag":1617,"props":1737,"children":1738},{"align":1590},[1739],{"type":504,"tag":520,"props":1740,"children":1741},{},[1742],{"type":510,"value":1743},"SVG",{"type":504,"tag":1617,"props":1745,"children":1746},{"align":1590},[1747],{"type":510,"value":1748},"矢量格式，无限缩放，体积小。",{"type":504,"tag":1617,"props":1750,"children":1751},{"align":1590},[1752],{"type":510,"value":1753},"不适合复杂照片。",{"type":504,"tag":1617,"props":1755,"children":1756},{"align":1590},[1757],{"type":510,"value":1758},"Logo、图标、简单的几何图形。",{"type":504,"tag":516,"props":1760,"children":1761},{},[1762,1767,1769,1775],{"type":504,"tag":520,"props":1763,"children":1764},{},[1765],{"type":510,"value":1766},"策略",{"type":510,"value":1768},"：使用 ",{"type":504,"tag":587,"props":1770,"children":1772},{"className":1771},[],[1773],{"type":510,"value":1774},"\u003Cpicture>",{"type":510,"value":1776}," 元素提供多种格式，让浏览器自己选择最优解。",{"type":504,"tag":579,"props":1778,"children":1782},{"className":1779,"code":1780,"language":1781,"meta":584,"style":584},"language-html shiki shiki-themes github-light github-dark","\u003Cpicture>\n  \u003Csource srcset=\"image.avif\" type=\"image\u002Favif\">\n  \u003Csource srcset=\"image.webp\" type=\"image\u002Fwebp\">\n  \u003Cimg src=\"image.jpeg\" alt=\"description\">\n\u003C\u002Fpicture>\n","html",[1783],{"type":504,"tag":587,"props":1784,"children":1785},{"__ignoreMap":584},[1786,1803,1848,1889,1933],{"type":504,"tag":591,"props":1787,"children":1788},{"class":593,"line":594},[1789,1794,1799],{"type":504,"tag":591,"props":1790,"children":1791},{"style":614},[1792],{"type":510,"value":1793},"\u003C",{"type":504,"tag":591,"props":1795,"children":1796},{"style":843},[1797],{"type":510,"value":1798},"picture",{"type":504,"tag":591,"props":1800,"children":1801},{"style":614},[1802],{"type":510,"value":811},{"type":504,"tag":591,"props":1804,"children":1805},{"class":593,"line":604},[1806,1811,1816,1821,1825,1830,1835,1839,1844],{"type":504,"tag":591,"props":1807,"children":1808},{"style":614},[1809],{"type":510,"value":1810},"  \u003C",{"type":504,"tag":591,"props":1812,"children":1813},{"style":843},[1814],{"type":510,"value":1815},"source",{"type":504,"tag":591,"props":1817,"children":1818},{"style":666},[1819],{"type":510,"value":1820}," srcset",{"type":504,"tag":591,"props":1822,"children":1823},{"style":614},[1824],{"type":510,"value":835},{"type":504,"tag":591,"props":1826,"children":1827},{"style":625},[1828],{"type":510,"value":1829},"\"image.avif\"",{"type":504,"tag":591,"props":1831,"children":1832},{"style":666},[1833],{"type":510,"value":1834}," type",{"type":504,"tag":591,"props":1836,"children":1837},{"style":614},[1838],{"type":510,"value":835},{"type":504,"tag":591,"props":1840,"children":1841},{"style":625},[1842],{"type":510,"value":1843},"\"image\u002Favif\"",{"type":504,"tag":591,"props":1845,"children":1846},{"style":614},[1847],{"type":510,"value":811},{"type":504,"tag":591,"props":1849,"children":1850},{"class":593,"line":636},[1851,1855,1859,1863,1867,1872,1876,1880,1885],{"type":504,"tag":591,"props":1852,"children":1853},{"style":614},[1854],{"type":510,"value":1810},{"type":504,"tag":591,"props":1856,"children":1857},{"style":843},[1858],{"type":510,"value":1815},{"type":504,"tag":591,"props":1860,"children":1861},{"style":666},[1862],{"type":510,"value":1820},{"type":504,"tag":591,"props":1864,"children":1865},{"style":614},[1866],{"type":510,"value":835},{"type":504,"tag":591,"props":1868,"children":1869},{"style":625},[1870],{"type":510,"value":1871},"\"image.webp\"",{"type":504,"tag":591,"props":1873,"children":1874},{"style":666},[1875],{"type":510,"value":1834},{"type":504,"tag":591,"props":1877,"children":1878},{"style":614},[1879],{"type":510,"value":835},{"type":504,"tag":591,"props":1881,"children":1882},{"style":625},[1883],{"type":510,"value":1884},"\"image\u002Fwebp\"",{"type":504,"tag":591,"props":1886,"children":1887},{"style":614},[1888],{"type":510,"value":811},{"type":504,"tag":591,"props":1890,"children":1891},{"class":593,"line":646},[1892,1896,1901,1906,1910,1915,1920,1924,1929],{"type":504,"tag":591,"props":1893,"children":1894},{"style":614},[1895],{"type":510,"value":1810},{"type":504,"tag":591,"props":1897,"children":1898},{"style":843},[1899],{"type":510,"value":1900},"img",{"type":504,"tag":591,"props":1902,"children":1903},{"style":666},[1904],{"type":510,"value":1905}," src",{"type":504,"tag":591,"props":1907,"children":1908},{"style":614},[1909],{"type":510,"value":835},{"type":504,"tag":591,"props":1911,"children":1912},{"style":625},[1913],{"type":510,"value":1914},"\"image.jpeg\"",{"type":504,"tag":591,"props":1916,"children":1917},{"style":666},[1918],{"type":510,"value":1919}," alt",{"type":504,"tag":591,"props":1921,"children":1922},{"style":614},[1923],{"type":510,"value":835},{"type":504,"tag":591,"props":1925,"children":1926},{"style":625},[1927],{"type":510,"value":1928},"\"description\"",{"type":504,"tag":591,"props":1930,"children":1931},{"style":614},[1932],{"type":510,"value":811},{"type":504,"tag":591,"props":1934,"children":1935},{"class":593,"line":707},[1936,1941,1945],{"type":504,"tag":591,"props":1937,"children":1938},{"style":614},[1939],{"type":510,"value":1940},"\u003C\u002F",{"type":504,"tag":591,"props":1942,"children":1943},{"style":843},[1944],{"type":510,"value":1798},{"type":504,"tag":591,"props":1946,"children":1947},{"style":614},[1948],{"type":510,"value":811},{"type":504,"tag":544,"props":1950,"children":1952},{"id":1951},"b-响应式图片与懒加载",[1953],{"type":510,"value":1954},"B. 响应式图片与懒加载",{"type":504,"tag":564,"props":1956,"children":1957},{},[1958,2081],{"type":504,"tag":568,"props":1959,"children":1960},{},[1961,1966,1968,1974,1976,1982,1984],{"type":504,"tag":520,"props":1962,"children":1963},{},[1964],{"type":510,"value":1965},"响应式图片 (Responsive Images)",{"type":510,"value":1967},"：根据不同的屏幕尺寸（设备像素比）提供不同分辨率的图片。避免在手机上加载桌面端的高清大图。使用 ",{"type":504,"tag":587,"props":1969,"children":1971},{"className":1970},[],[1972],{"type":510,"value":1973},"srcset",{"type":510,"value":1975}," 和 ",{"type":504,"tag":587,"props":1977,"children":1979},{"className":1978},[],[1980],{"type":510,"value":1981},"sizes",{"type":510,"value":1983}," 属性实现。",{"type":504,"tag":579,"props":1985,"children":1987},{"className":1779,"code":1986,"language":1781,"meta":584,"style":584},"\u003Cimg srcset=\"image-480w.jpg 480w,\n             image-800w.jpg 800w\"\n     sizes=\"(max-width: 600px) 480px,\n            800px\"\n     src=\"image-800w.jpg\" alt=\"description\">\n",[1988],{"type":504,"tag":587,"props":1989,"children":1990},{"__ignoreMap":584},[1991,2015,2023,2040,2048],{"type":504,"tag":591,"props":1992,"children":1993},{"class":593,"line":594},[1994,1998,2002,2006,2010],{"type":504,"tag":591,"props":1995,"children":1996},{"style":614},[1997],{"type":510,"value":1793},{"type":504,"tag":591,"props":1999,"children":2000},{"style":843},[2001],{"type":510,"value":1900},{"type":504,"tag":591,"props":2003,"children":2004},{"style":666},[2005],{"type":510,"value":1820},{"type":504,"tag":591,"props":2007,"children":2008},{"style":614},[2009],{"type":510,"value":835},{"type":504,"tag":591,"props":2011,"children":2012},{"style":625},[2013],{"type":510,"value":2014},"\"image-480w.jpg 480w,\n",{"type":504,"tag":591,"props":2016,"children":2017},{"class":593,"line":604},[2018],{"type":504,"tag":591,"props":2019,"children":2020},{"style":625},[2021],{"type":510,"value":2022},"             image-800w.jpg 800w\"\n",{"type":504,"tag":591,"props":2024,"children":2025},{"class":593,"line":636},[2026,2031,2035],{"type":504,"tag":591,"props":2027,"children":2028},{"style":666},[2029],{"type":510,"value":2030},"     sizes",{"type":504,"tag":591,"props":2032,"children":2033},{"style":614},[2034],{"type":510,"value":835},{"type":504,"tag":591,"props":2036,"children":2037},{"style":625},[2038],{"type":510,"value":2039},"\"(max-width: 600px) 480px,\n",{"type":504,"tag":591,"props":2041,"children":2042},{"class":593,"line":646},[2043],{"type":504,"tag":591,"props":2044,"children":2045},{"style":625},[2046],{"type":510,"value":2047},"            800px\"\n",{"type":504,"tag":591,"props":2049,"children":2050},{"class":593,"line":707},[2051,2056,2060,2065,2069,2073,2077],{"type":504,"tag":591,"props":2052,"children":2053},{"style":666},[2054],{"type":510,"value":2055},"     src",{"type":504,"tag":591,"props":2057,"children":2058},{"style":614},[2059],{"type":510,"value":835},{"type":504,"tag":591,"props":2061,"children":2062},{"style":625},[2063],{"type":510,"value":2064},"\"image-800w.jpg\"",{"type":504,"tag":591,"props":2066,"children":2067},{"style":666},[2068],{"type":510,"value":1919},{"type":504,"tag":591,"props":2070,"children":2071},{"style":614},[2072],{"type":510,"value":835},{"type":504,"tag":591,"props":2074,"children":2075},{"style":625},[2076],{"type":510,"value":1928},{"type":504,"tag":591,"props":2078,"children":2079},{"style":614},[2080],{"type":510,"value":811},{"type":504,"tag":568,"props":2082,"children":2083},{},[2084,2089,2091,2179,2183,2188,2189,2194,2196,2202],{"type":504,"tag":520,"props":2085,"children":2086},{},[2087],{"type":510,"value":2088},"懒加载 (Lazy Loading)",{"type":510,"value":2090},"：只加载视口内或即将进入视口的图片。对于首屏以下的图片，这是必须实施的优化。现代浏览器已原生支持。",{"type":504,"tag":579,"props":2092,"children":2094},{"className":1779,"code":2093,"language":1781,"meta":584,"style":584},"\u003Cimg src=\"image.jpg\" loading=\"lazy\" alt=\"description\" width=\"200\" height=\"200\">\n",[2095],{"type":504,"tag":587,"props":2096,"children":2097},{"__ignoreMap":584},[2098],{"type":504,"tag":591,"props":2099,"children":2100},{"class":593,"line":594},[2101,2105,2109,2113,2117,2122,2127,2131,2136,2140,2144,2148,2153,2157,2162,2167,2171,2175],{"type":504,"tag":591,"props":2102,"children":2103},{"style":614},[2104],{"type":510,"value":1793},{"type":504,"tag":591,"props":2106,"children":2107},{"style":843},[2108],{"type":510,"value":1900},{"type":504,"tag":591,"props":2110,"children":2111},{"style":666},[2112],{"type":510,"value":1905},{"type":504,"tag":591,"props":2114,"children":2115},{"style":614},[2116],{"type":510,"value":835},{"type":504,"tag":591,"props":2118,"children":2119},{"style":625},[2120],{"type":510,"value":2121},"\"image.jpg\"",{"type":504,"tag":591,"props":2123,"children":2124},{"style":666},[2125],{"type":510,"value":2126}," loading",{"type":504,"tag":591,"props":2128,"children":2129},{"style":614},[2130],{"type":510,"value":835},{"type":504,"tag":591,"props":2132,"children":2133},{"style":625},[2134],{"type":510,"value":2135},"\"lazy\"",{"type":504,"tag":591,"props":2137,"children":2138},{"style":666},[2139],{"type":510,"value":1919},{"type":504,"tag":591,"props":2141,"children":2142},{"style":614},[2143],{"type":510,"value":835},{"type":504,"tag":591,"props":2145,"children":2146},{"style":625},[2147],{"type":510,"value":1928},{"type":504,"tag":591,"props":2149,"children":2150},{"style":666},[2151],{"type":510,"value":2152}," width",{"type":504,"tag":591,"props":2154,"children":2155},{"style":614},[2156],{"type":510,"value":835},{"type":504,"tag":591,"props":2158,"children":2159},{"style":625},[2160],{"type":510,"value":2161},"\"200\"",{"type":504,"tag":591,"props":2163,"children":2164},{"style":666},[2165],{"type":510,"value":2166}," height",{"type":504,"tag":591,"props":2168,"children":2169},{"style":614},[2170],{"type":510,"value":835},{"type":504,"tag":591,"props":2172,"children":2173},{"style":625},[2174],{"type":510,"value":2161},{"type":504,"tag":591,"props":2176,"children":2177},{"style":614},[2178],{"type":510,"value":811},{"type":504,"tag":2180,"props":2181,"children":2182},"br",{},[],{"type":504,"tag":520,"props":2184,"children":2185},{},[2186],{"type":510,"value":2187},"注意",{"type":510,"value":1409},{"type":504,"tag":520,"props":2190,"children":2191},{},[2192],{"type":510,"value":2193},"不要",{"type":510,"value":2195},"对 LCP 元素使用 ",{"type":504,"tag":587,"props":2197,"children":2199},{"className":2198},[],[2200],{"type":510,"value":2201},"loading=\"lazy\"",{"type":510,"value":2203},"，这会延迟其加载，反而降低性能。",{"type":504,"tag":544,"props":2205,"children":2207},{"id":2206},"c-图片-cdn",[2208],{"type":510,"value":2209},"C. 图片 CDN",{"type":504,"tag":516,"props":2211,"children":2212},{},[2213],{"type":510,"value":2214},"专业的图片 CDN (如 Cloudinary, Imgix) 能提供自动化、即时的图片优化服务：",{"type":504,"tag":1397,"props":2216,"children":2217},{},[2218,2236,2246],{"type":504,"tag":568,"props":2219,"children":2220},{},[2221,2226,2228,2234],{"type":504,"tag":520,"props":2222,"children":2223},{},[2224],{"type":510,"value":2225},"自动格式转换",{"type":510,"value":2227},"：根据浏览器的 ",{"type":504,"tag":587,"props":2229,"children":2231},{"className":2230},[],[2232],{"type":510,"value":2233},"Accept",{"type":510,"value":2235}," 头，自动提供 WebP\u002FAVIF 格式。",{"type":504,"tag":568,"props":2237,"children":2238},{},[2239,2244],{"type":504,"tag":520,"props":2240,"children":2241},{},[2242],{"type":510,"value":2243},"即时变换",{"type":510,"value":2245},"：通过 URL 参数实时调整图片尺寸、裁剪、质量和水印。",{"type":504,"tag":568,"props":2247,"children":2248},{},[2249,2254],{"type":504,"tag":520,"props":2250,"children":2251},{},[2252],{"type":510,"value":2253},"全球分发",{"type":510,"value":2255},"：利用 CDN 网络加速全球用户的访问。",{"type":504,"tag":528,"props":2257,"children":2258},{},[],{"type":504,"tag":532,"props":2260,"children":2262},{"id":2261},"_3-cdn-缓存策略",[2263],{"type":510,"value":2264},"3. CDN 缓存策略",{"type":504,"tag":516,"props":2266,"children":2267},{},[2268],{"type":510,"value":2269},"CDN (Content Delivery Network) 将你的静态资源（JS, CSS, 图片, 字体）缓存到全球各地的边缘节点。当用户请求资源时，会从离他最近的节点返回，大大降低延迟。",{"type":504,"tag":544,"props":2271,"children":2273},{"id":2272},"关键-http-缓存头-cache-control",[2274,2276,2282],{"type":510,"value":2275},"关键 HTTP 缓存头 (",{"type":504,"tag":587,"props":2277,"children":2279},{"className":2278},[],[2280],{"type":510,"value":2281},"Cache-Control",{"type":510,"value":2283},")",{"type":504,"tag":516,"props":2285,"children":2286},{},[2287],{"type":510,"value":2288},"这是你与 CDN 和浏览器沟通缓存行为的方式。",{"type":504,"tag":1397,"props":2290,"children":2291},{},[2292,2368,2456],{"type":504,"tag":568,"props":2293,"children":2294},{},[2295,2300,2302,2308,2310],{"type":504,"tag":520,"props":2296,"children":2297},{},[2298],{"type":510,"value":2299},"对于带 hash 的静态资源",{"type":510,"value":2301}," (e.g., ",{"type":504,"tag":587,"props":2303,"children":2305},{"className":2304},[],[2306],{"type":510,"value":2307},"main.a8f5b2.js",{"type":510,"value":2309},")：",{"type":504,"tag":1397,"props":2311,"children":2312},{},[2313,2325,2336,2347,2358],{"type":504,"tag":568,"props":2314,"children":2315},{},[2316],{"type":504,"tag":520,"props":2317,"children":2318},{},[2319],{"type":504,"tag":587,"props":2320,"children":2322},{"className":2321},[],[2323],{"type":510,"value":2324},"Cache-Control: public, max-age=31536000, immutable",{"type":504,"tag":568,"props":2326,"children":2327},{},[2328,2334],{"type":504,"tag":587,"props":2329,"children":2331},{"className":2330},[],[2332],{"type":510,"value":2333},"public",{"type":510,"value":2335},"：可以被任何缓存（浏览器、CDN）缓存。",{"type":504,"tag":568,"props":2337,"children":2338},{},[2339,2345],{"type":504,"tag":587,"props":2340,"children":2342},{"className":2341},[],[2343],{"type":510,"value":2344},"max-age=31536000",{"type":510,"value":2346},"：缓存一年。",{"type":504,"tag":568,"props":2348,"children":2349},{},[2350,2356],{"type":504,"tag":587,"props":2351,"children":2353},{"className":2352},[],[2354],{"type":510,"value":2355},"immutable",{"type":510,"value":2357},"：告诉浏览器这个文件永远不会变，不需要因为刷新而重新验证。",{"type":504,"tag":568,"props":2359,"children":2360},{},[2361,2366],{"type":504,"tag":520,"props":2362,"children":2363},{},[2364],{"type":510,"value":2365},"效果",{"type":510,"value":2367},"：一次下载，永久使用，直到文件名改变。这是最强的缓存策略。",{"type":504,"tag":568,"props":2369,"children":2370},{},[2371,2376,2377],{"type":504,"tag":520,"props":2372,"children":2373},{},[2374],{"type":510,"value":2375},"对于 HTML 文档",{"type":510,"value":1409},{"type":504,"tag":1397,"props":2378,"children":2379},{},[2380,2402,2414,2447],{"type":504,"tag":568,"props":2381,"children":2382},{},[2383,2392,2393],{"type":504,"tag":520,"props":2384,"children":2385},{},[2386],{"type":504,"tag":587,"props":2387,"children":2389},{"className":2388},[],[2390],{"type":510,"value":2391},"Cache-Control: no-cache",{"type":510,"value":1417},{"type":504,"tag":520,"props":2394,"children":2395},{},[2396],{"type":504,"tag":587,"props":2397,"children":2399},{"className":2398},[],[2400],{"type":510,"value":2401},"Cache-Control: public, max-age=0, must-revalidate",{"type":504,"tag":568,"props":2403,"children":2404},{},[2405,2407,2412],{"type":510,"value":2406},"这",{"type":504,"tag":520,"props":2408,"children":2409},{},[2410],{"type":510,"value":2411},"不代表不缓存",{"type":510,"value":2413},"，而是代表“每次使用前都必须回源服务器验证资源是否过期”。",{"type":504,"tag":568,"props":2415,"children":2416},{},[2417,2422,2424,2430,2431,2437,2439,2445],{"type":504,"tag":520,"props":2418,"children":2419},{},[2420],{"type":510,"value":2421},"验证机制",{"type":510,"value":2423},"：通过 ",{"type":504,"tag":587,"props":2425,"children":2427},{"className":2426},[],[2428],{"type":510,"value":2429},"ETag",{"type":510,"value":1417},{"type":504,"tag":587,"props":2432,"children":2434},{"className":2433},[],[2435],{"type":510,"value":2436},"Last-Modified",{"type":510,"value":2438}," 头。如果服务器返回 ",{"type":504,"tag":587,"props":2440,"children":2442},{"className":2441},[],[2443],{"type":510,"value":2444},"304 Not Modified",{"type":510,"value":2446},"，CDN\u002F浏览器就使用本地缓存，只消耗一个极小的验证请求，而不是重新下载整个 HTML。",{"type":504,"tag":568,"props":2448,"children":2449},{},[2450,2454],{"type":504,"tag":520,"props":2451,"children":2452},{},[2453],{"type":510,"value":2365},{"type":510,"value":2455},"：保证用户总能获取最新的页面入口，同时在内容未变时利用缓存。",{"type":504,"tag":568,"props":2457,"children":2458},{},[2459,2464,2465],{"type":504,"tag":520,"props":2460,"children":2461},{},[2462],{"type":510,"value":2463},"对于需要频繁更新的 API 数据",{"type":510,"value":1409},{"type":504,"tag":1397,"props":2466,"children":2467},{},[2468,2480],{"type":504,"tag":568,"props":2469,"children":2470},{},[2471],{"type":504,"tag":520,"props":2472,"children":2473},{},[2474],{"type":504,"tag":587,"props":2475,"children":2477},{"className":2476},[],[2478],{"type":510,"value":2479},"Cache-Control: no-store",{"type":504,"tag":568,"props":2481,"children":2482},{},[2483,2487],{"type":504,"tag":520,"props":2484,"children":2485},{},[2486],{"type":510,"value":2365},{"type":510,"value":2488},"：完全禁止缓存。适用于敏感或实时性要求极高的数据。",{"type":504,"tag":528,"props":2490,"children":2491},{},[],{"type":504,"tag":532,"props":2493,"children":2495},{"id":2494},"_4-关联阅读",[2496],{"type":510,"value":2497},"4. 关联阅读",{"type":504,"tag":1397,"props":2499,"children":2500},{},[2501,2528,2543],{"type":504,"tag":568,"props":2502,"children":2503},{},[2504,2509,2511,2520,2521],{"type":504,"tag":520,"props":2505,"children":2506},{},[2507],{"type":510,"value":2508},"web.dev",{"type":510,"value":2510},": ",{"type":504,"tag":2512,"props":2513,"children":2517},"a",{"href":2514,"rel":2515},"https:\u002F\u002Fweb.dev\u002Fcode-splitting-with-dynamic-imports-in-next-js\u002F",[2516],"nofollow",[2518],{"type":510,"value":2519},"Code Splitting",{"type":510,"value":1135},{"type":504,"tag":2512,"props":2522,"children":2525},{"href":2523,"rel":2524},"https:\u002F\u002Fweb.dev\u002Foptimize-images\u002F",[2516],[2526],{"type":510,"value":2527},"Image Optimization",{"type":504,"tag":568,"props":2529,"children":2530},{},[2531,2536,2537],{"type":504,"tag":520,"props":2532,"children":2533},{},[2534],{"type":510,"value":2535},"Webpack 文档",{"type":510,"value":2510},{"type":504,"tag":2512,"props":2538,"children":2541},{"href":2539,"rel":2540},"https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Fcode-splitting\u002F",[2516],[2542],{"type":510,"value":2519},{"type":504,"tag":568,"props":2544,"children":2545},{},[2546,2551,2552],{"type":504,"tag":520,"props":2547,"children":2548},{},[2549],{"type":510,"value":2550},"HTTP Caching",{"type":510,"value":2510},{"type":504,"tag":2512,"props":2553,"children":2556},{"href":2554,"rel":2555},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FHeaders\u002FCache-Control",[2516],[2557],{"type":510,"value":2558},"MDN Cache-Control",{"type":504,"tag":2560,"props":2561,"children":2562},"style",{},[2563],{"type":510,"value":2564},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":584,"searchDepth":604,"depth":604,"links":2566},[2567,2571,2576,2580],{"id":534,"depth":604,"text":537,"children":2568},[2569,2570],{"id":546,"depth":636,"text":549},{"id":1387,"depth":636,"text":1390},{"id":1560,"depth":604,"text":1563,"children":2572},[2573,2574,2575],{"id":1571,"depth":636,"text":1574},{"id":1951,"depth":636,"text":1954},{"id":2206,"depth":636,"text":2209},{"id":2261,"depth":604,"text":2264,"children":2577},[2578],{"id":2272,"depth":636,"text":2579},"关键 HTTP 缓存头 (Cache-Control)",{"id":2494,"depth":604,"text":2497},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":2582},"\u003Cpath fill=\"currentColor\" d=\"m10.828 12l4.95 4.95l-1.414 1.415L8 12l6.364-6.364l1.414 1.414z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":2584},"\u003Cpath fill=\"currentColor\" d=\"M3 4h18v2H3zm0 7h12v2H3zm0 7h18v2H3z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":2586},"\u003Cpath fill=\"currentColor\" d=\"m13.172 12l-4.95-4.95l1.414-1.413L16 12l-6.364 6.364l-1.414-1.415z\"\u002F>",{"left":4,"top":4,"width":2588,"height":2588,"rotate":4,"vFlip":6,"hFlip":6,"body":2589},1024,"\u003Cpath fill=\"currentColor\" d=\"M768 832a128 128 0 0 1-128 128H192A128 128 0 0 1 64 832V384a128 128 0 0 1 128-128v64a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64z\"\u002F>\u003Cpath fill=\"currentColor\" d=\"M384 128a64 64 0 0 0-64 64v448a64 64 0 0 0 64 64h448a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64zm0-64h448a128 128 0 0 1 128 128v448a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128V192A128 128 0 0 1 384 64\"\u002F>"]