前端代码分割与预取（Code Splitting、Prefetch 与验证）

概述代码分割按路由与组件拆分产物, 预取在空闲时加载后续资源, 降低首屏体积与交互延迟。结合优先级与缓存策略可进一步提升体验。关键实践与参数动态导入: `import()` 懒加载路由与组件预取策略: `rel=prefetch` 或构建工具注解优先级: 关键资源高优先级, 次要资源低监测: `LCP` `INP` 与传输体积示例/配置/实现const Page = () => import('./Page.js') <link rel="prefetch" href="/js/page.chunk.js" as="script"> import React, { lazy, Suspense } from 'react' const User = lazy(() => import('./User')) export default function App() { return <Suspense fallback={null}><User/></Suspense> } 验证首屏体积: 打包后首屏传输体积下降预取效果: 用户导航前资源已缓存, 交互延迟降低指标改进: 记录 `LCP` `INP` 改善幅度兼容性: 不支持预取的环境回退正常注意事项预取需在空闲与网络良好时进行过度分割可能增加请求数量与开销与缓存与版本策略协同在关键路径保持资源简洁