路由懒加载通过动态 import() 按需加载路由模块，显著减小首页体积至30%～40%，需构建工具支持、预加载优化及兼容性处理。
路由懒加载是减少单页应用初始体积最直接有效的方式。它把不同页面的代码切分成独立 chunk，用户访问哪个路由，才加载对应模块，首页 JS 体积通常能压到原来的 30%～40%。
按路由粒度拆分代码块
打包工具（如 Webpack、Vite）会自动识别 动态 import() 语法，将被导入的模块单独生成一个 chunk 文件。比如访问 `/user` 路由时，只加载 user.[hash].js，而不是把所有页面逻辑都打进 main.js。
- React 中常用
React.lazy()配合Suspense - Vue Router 支持
defineAsyncComponent或直接写import()函数 - 不建议对首页或登录页做懒加载，它们本就该优先加载
避免懒加载误伤首屏体验
光拆分不够，还得控制加载时机。如果用户点导航才开始拉取 JS，会有明显延迟甚至白屏。
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 鼠标悬停路由链接时预加载：Webpack 支持
/* webpackPrefetch: true */ - 在路由切换前触发
import()，而非渲染组件时才调用 - 配合
Suspense或 loading 状态提示，别让用户干等
结合构建配置提升效果
懒加载不是“写了 import() 就完事”，需要构建工具配合才能真正产出小 chunk。
立即学习“Java免费学习笔记（深入）”；
- 确认打包产物中出现多个
route-xxx.[hash].js类型文件 - Vite 默认启用代码分割；Webpack 需检查
optimization.splitChunks是否启用 - 禁用
optimization.runtimeChunk: false可防止运行时逻辑混入业务 chunk
注意边界场景和兼容性
懒加载在真实项目中可能遇到一些隐性问题，提前识别能少踩坑。
- 服务端渲染（SSR）需同步处理，否则 hydration 会失败
- 某些低版本 Android WebView 对
import()支持不完整，需降级方案 - 路由守卫中调用异步组件，要确保守卫逻辑能等待模块加载完成
