路由懒加载通过动态import按需加载页面组件，避免打包成单一文件，提升首屏加载速度。React中使用React.lazy与Suspense配合实现，Vue中在Vue Router配置时采用动态import，均由Webpack自动分割代码生成独立chunk，建议添加loading提示、合理拆分并可结合预加载优化体验。
在现代前端应用中，JavaScript 的代码分割（Code Spliting）是提升性能的关键手段之一。通过将代码拆分成更小的块，按需加载，可以显著减少首屏加载时间。其中，路由懒加载是一种常见且高效的实现方式，特别适用于使用 React、Vue 等框架的单页应用（SPA）。
什么是路由懒加载？
路由懒加载指的是：只有当用户跳转到某个路由时，才动态加载该路由对应的组件和相关代码。这避免了将所有页面打包进一个巨大的 bundle.js 文件中，从而优化初始加载速度。
其核心原理是利用 JavaScript 的动态 import() 语法，配合打包工具（如 Webpack、Vite）自动实现代码分割。
React 中的路由懒加载实现
在 React 项目中，结合 React.lazy 和 Suspense 可轻松实现路由级懒加载。
立即学习“Java免费学习笔记（深入）”；
示例代码：
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Suspense } from 'react';
// 懒加载组件
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));
const User = React.lazy(() => import('./pages/User'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/user/:id" element={<User />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</Suspense>
</Router>
);
}
export default App;
Webpack 会自动将每个 import() 拆分为独立的 chunk 文件，例如：Home.chunk.js，访问对应路由时才会加载。
Vue 中的路由懒加载配置
在 Vue 项目中，使用 Vue Router 时，可通过动态 import() 实现组件的懒加载。
示例代码：
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/user',
name: 'User',
component: () => import('../views/User.vue')
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
这种写法会让 Webpack 自动进行代码分割，每个页面组件生成单独的 JS 文件，访问时异步加载。
优化建议与注意事项
- 为懒加载组件添加 loading 提示（如 React 的 Suspense fallback），改善用户体验
- 避免过度拆分，比如将按钮级别的组件也懒加载，反而增加请求开销
- 可结合 webpackChunkName 注释为 chunk 命名，便于维护
- 使用预加载（prefetch）策略，在空闲时提前加载可能用到的模块
基本上就这些。路由懒加载是现代前端工程化中最基础也最有效的性能优化手段之一，合理使用能显著提升应用响应速度和用户体验。
