前端路由级别代码分割与预渲染协同（SSR/ISR、Prefetch 与验证）

概述路由级代码分割将大页面拆分为独立产物，SSR/ISR在服务端或边缘预渲染关键页面，配合Prefetch在用户行动前加载次要资源，优化首屏与交互体验。关键实践与参数懒加载: `import()` 按路由拆分预渲染: SSR首屏、ISR周期性再生成预取: `rel=prefetch` 在空闲加载次要资源指标: `LCP` `INP` 与传输体积示例/配置/实现// 路由级分割 const ProductPage = () => import('./routes/ProductPage.js') const CartPage = () => import('./routes/CartPage.js') <!-- 预取后续路由资源 --> <link rel="prefetch" href="/js/product.chunk.js" as="script"> <link rel="prefetch" href="/js/cart.chunk.js" as="script"> // ISR 示例（框架支持时） export async function getStaticProps() { const data = await fetch('https://api.example.com/products').then(r => r.json()) return { props: { data }, revalidate: 300 } } 验证首屏体积与TTFB: 对比分割与预渲染前后体积与首字节时间预取效果: 导航到后续路由加载更快，网络面板显示命中缓存指标改进: LCP与INP改善达到目标阈值兼容性: 无预取环境下回退正常注意事项预取需结合网络与设备条件，避免过度下载SSR/ISR需考虑缓存与失效策略分割粒度需平衡请求数量与体积与缓存与版本治理协同