路由懒加载通过动态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免费学习笔记（深入）”；
爱克网络企业网站建设系统 No.090730
下载
系统特点：功能简洁实用。目前互联网上最简洁的企业网站建设系统！原创程序代码。非网络一般下载后修改的代码。更安全。速度快！界面模版分离。原创的分离思路，完全不同于其他方式，不一样的简单感受！搜索引擎优化。做了基础的seo优化。对搜索引擎更友好系统功能关于我们：介绍企业介绍类信息，可自由添加多个介绍栏目！资讯中心：公司或行业资讯类内容展示。可自由添加多个资讯内容！产品展示：支持类别设置，可添加产品图片
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 (
Loading... 
