JavaScript 中路由级代码分割的核心是用 import() 动态导入路由组件，使构建工具生成独立 chunk，按需加载；需在路由配置中直接使用 import()，配合命名 chunk、预加载策略及 SSR 兼容处理。
在 JavaScript 中，用 import() 实现路由级代码分割，核心是把每个路由对应的组件（或页面模块）变成一个动态导入的 Promise，让打包工具（如 Webpack、Vite）自动为它生成独立的 chunk 文件，只在访问该路由时才加载。
路由配置中使用 import() 替代静态 import
不要提前引入组件，而是在路由定义里直接写 import('./pages/Home.vue') 或 import('./views/About.js')。现代构建工具会识别这种语法并拆包。
- Vue Router 示例：
const routes = [
{
path: '/home',
component: () => import('./pages/Home.vue') // ✅ 动态导入，自动分割
},
{
path: '/about',
component: () => import('./pages/About.vue')
}
]- React Router 示例（v6.4+）：
const router = createBrowserRouter([
{
path: '/dashboard',
element: <DashboardLayout />,
children: [
{
index: true,
element: <Dashboard />
},
{
path: 'analytics',
element: <Suspense fallback={<Loading />}><Analytics /></Suspense>,
loader: () => import('./routes/Analytics').then(m => m.loader)
}
]
}
])注意：React 中常配合 Suspense 处理加载状态；loader 函数也可用 import() 加载数据逻辑。
配合命名 chunk（可选但推荐）
默认生成的 chunk 名是数字（如 2.a1b2c3.js），不利于调试和缓存控制。可以用 webpack 的魔法注释指定 chunk 名：
立即学习“Java免费学习笔记（深入）”；
component: () => import(/* webpackChunkName: "page-home" */ './pages/Home.vue')
Vite 也支持类似语法（/* @vite-ignore */ 不需要，直接用 /* webpackChunkName */ 即可生效）。
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
这样打包后会生成 page-home.xxxxx.js，便于监控和长期缓存。
预加载与懒加载策略（按需优化）
动态 import 默认是懒加载（访问时才请求）。如果想提升体验，可以主动预加载：
- 鼠标悬停导航项时预加载：
onMouseEnter={() => import('./pages/Settings.vue')} - 路由切换前预加载下一个页面（例如在
beforeEach钩子中触发 import，但不 await） - Vite 中还可利用
import.meta.webpackHot或vite-plugin-pwa做更精细控制
不过多数场景下，保持原生懒加载即可，避免过早加载浪费带宽。
服务端渲染（SSR）注意事项
若项目有 SSR（如 Nuxt、Next、Remix），动态 import 仍可用，但需确保：
- 服务端执行时，
import()不报错（Node.js 会尝试加载，需配置externals或条件判断） - 组件导出需兼容服务端环境（比如不依赖
window或 DOM API） - 使用
defineAsyncComponent（Vue）或loadable（React）等封装方案更稳妥
例如 Vue 3 SSR 推荐写法：
import { defineAsyncComponent } from 'vue'
const Profile = defineAsyncComponent(() => import('./Profile.vue')) 
