前端路由/组件懒加载如何实现？对首屏有什么帮助？

用动态 import() 让非首屏代码按需加载：

// Vue Router 懒加载
const routes = [{ path: '/about', component: () => import('./About.vue') }]

// React.lazy + Suspense
const About = React.lazy(() => import('./About'))

构建时每个 import() 会被拆成独立 chunk，访问对应路由才下载。

首屏收益：

• 首屏只下载当前页面所需代码，JS 体积大幅变小
• 主包（vendor）更小 → 解析/执行更快 → FCP/LCP 提升
• 配合 prefetch（如 Vite 的 <link rel="prefetch">）可在空闲预取下个页面

反例：把整个应用 import 进主包，用户首屏就要下载全部代码。

同分类其他题目