使用动态导入实现路由懒加载的核心做法是调用 import() 函数，并将返回的 promise 对象直接作为路由配置中 component 字段的值。这样做可以让浏览器在用户访问特定路由时才下载对应的 javascript 代码块，从而显著减小初始包体积并加快首屏加载速度。
Vue Router 中如何配置异步组件
在 Vue Router 中，只需将路由定义里的 component 属性替换为返回 Promise 的箭头函数即可触发懒加载机制。该函数内部执行 import() 并指向具体的 Vue 单文件组件路径，路由器会在导航发生时自动等待模块加载完成。
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/home',
component: () => import('./views/Home.vue')
},
{
path: '/about',
component: () => import('./views/About.vue')
}
]
});
export default router;预期结果：当首次访问 /home 时，浏览器会发起对 Home.vue 编译后 JS 文件的请求；若直接访问 /about，则不会加载 Home.vue 的代码。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
React Router 中如何实现按需加载
在 React Router 中，通常结合 React.lazy 和 Suspense 来实现路由级别的懒加载。React.lazy 接收一个包含 import() 调用的函数，将其包裹的路由组件会在渲染前进行代码分割。配合 Suspense 可以展示加载状态，避免页面空白。
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
<Router>
);
}
export default App;预期结果：点击链接进入 /home 时，Home 组件的代码块才会被下载并执行；Suspense 中的 fallback 内容会在加载期间显示。
动态导入失败时的错误处理策略
当网络异常或模块路径错误导致 import() 拒绝 Promise 时，应用需要捕获该错误以防止白屏。在 Vue 中可以通过路由守卫的 catch 方法或在组件加载逻辑中处理；在 React 中可以使用 Error Boundary 来捕获 React.lazy 抛出的异常，并提供重试或降级界面。
