javascript路由懒加载核心是用动态import()按需加载组件，替代静态import以实现代码分割；vue router中配置component为import()函数，react router中用lazy+suspense，配合webpackchunkname可命名chunk。
在 JavaScript 中，路由切换时使用动态导入（import()）实现代码分割，核心是把每个路由对应的组件按需加载，而不是一次性打包进主 bundle。这样能显著减小首屏体积，提升应用启动速度。
用 import() 替代静态 import
静态 import 会在构建时被 Webpack/Vite 等工具打包进初始 chunk；而动态 import() 是一个返回 Promise 的函数，支持运行时按需加载模块，天然触发代码分割。
- 错误写法（静态导入，无分割）：
import Home from './pages/Home.vue' - 正确写法（动态导入，自动分割）：
const Home = () => import('./pages/Home.vue')
在 Vue Router 中配置懒加载路由
Vue Router 支持直接传入函数作为 component 值，该函数返回动态 import() 的 Promise：
const routes = [
{
path: '/home',
// ✅ 动态导入，生成独立 chunk
component: () => import('./views/Home.vue')
},
{
path: '/user/:id',
// ✅ 支持带参数的路径，同样分割
component: () => import('./views/UserProfile.vue')
}
]
构建后，每个 import() 会生成单独的 JS 文件（如 2.a1b2c3.js），仅在访问对应路由时下载。
在 React Router 中配合 Suspense 使用
React Router v6.4+ 推荐结合 React.lazy 和 Suspense 实现懒加载：
import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
<p>const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))</p><p>function App() {
return (
<suspense fallback="<div">Loading...>
<routes><route path="/" element="<Home"></route> />
<route path="/about" element="<About"></route> />
</routes></suspense>
)
}</p>
lazy 内部就是封装了 import()，必须配合 Suspense 处理加载状态。
优化提示：添加 webpackChunkName
为生成的 chunk 赋予可读名称，便于调试和缓存管理：
component: () => import(/* webpackChunkName: "home-page" */ './views/Home.vue')
Vite 中使用注释 /* @vite-ignore */ 或直接支持 /* webpackChunkName */（Vite 4.3+ 兼容）。构建后会生成类似 home-page.xxxxx.js 的文件。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
