JavaScript 代码分割主要通过动态导入（import()）实现，它返回 Promise 实现按需加载；支持变量路径拼接但需静态可分析，配合 Webpack/Vite 自动分包并可通过魔法注释优化，适用于路由、组件及条件加载场景，且可结合 try/catch 管理错误与加载状态。
JavaScript 的代码分割主要通过动态导入（import()）实现，它返回一个 Promise，让模块按需加载，而不是在初始加载时全部打包进来。
动态导入的基本语法
动态导入使用函数式调用 import()，接收模块路径字符串，返回 Promise：
-
import('./module.js')加载成功后 resolve 模块对象 - 路径支持变量拼接（如
import(`./pages/${page}.js`)），但不能是完全动态的表达式（Webpack/Vite 需在构建时能静态分析） - 不支持直接解构，需先 await 再取值：
const { init } = await import('./utils.js')
配合 Webpack 或 Vite 自动分割
现代构建工具会把 import() 调用识别为分割点，自动生成独立 chunk：
- Webpack 中无需额外配置，
import()默认触发 code splitting - Vite 同样原生支持，生成的 chunk 会带 hash，自动处理加载和缓存
- 可配合魔法注释优化行为，例如：
import(/* webpackChunkName: "login" */ './login.js')指定 chunk 名
常见使用场景
动态导入适合延迟加载非首屏依赖：
立即学习“Java免费学习笔记（深入）”；
-
路由级拆分：React Router / Vue Router 的 lazy loading 就基于
import() - 组件级拆分：点击按钮后才加载富文本编辑器、图表库等重型模块
- 条件加载：根据用户权限或设备特性加载不同模块，如
import('./mobile-layout.js')
错误处理与加载状态
因为返回 Promise，可以自然使用 try/catch 和 loading 状态管理：
- 加载中显示 skeleton 或 loading 提示
- 捕获失败并降级，例如 fallback 到轻量实现或提示用户重试
- 避免未处理的 Promise rejection，尤其在 React 中可能触发错误边界
