JavaScript 代码分割核心是按需加载以提升首屏速度，主要靠动态 import()实现路由 / 组件级懒加载，配合 SplitChunksPlugin 提取公共依赖，二者协同优化。
JavaScript 实现代码分割，核心目标是把大体积的打包文件（如 bundle.js）拆成多个小块，在需要时再加载，从而提升首屏加载速度和用户体验。关键不在于“能不能分”，而在于“怎么分得合理、加载得及时、不破坏运行逻辑”。
动态 import() —— 最常用、最推荐的方式
这是 ES 标准语法，支持按需加载模块，返回 Promise，可配合 async/await 使用。Webpack、Vite、Rollup 等现代构建 工具 原生支持，会自动将其转为独立 chunk。
- 用法简单：直接在函数中调用
import('./module.js')，而不是顶部的静态import - 支持魔法注释（Webpack）控制 chunk 名称或预加载行为，例如：
import(/* webpackChunkName: "lodash" */ 'lodash') - 适用于 路由 级（如 React Router 的 lazy + Suspense）、组件级（点击弹窗才加载）、工具类（如 Excel 导出功能触发后加载 SheetJS）等场景
路由级代码分割（以 React 为例）
对单页应用（SPA）效果最明显。把不同路由对应的组件单独打包，用户访问 /dashboard 时不会加载 /settings 的代码。
- React 中常用
React.lazy()+Suspense：const Home = lazy(() => import('./pages/Home')); - 配合 React Router v6，用
element属性包裹<suspense></suspense>处理加载状态 - Vite 用户可直接用
defineAsyncComponent（Vue）或lazy（React），底层仍是import()
SplitChunksPlugin（Webpack）—— 静态依赖自动拆包
适用于提取公共代码，比如多个页面都用了 moment 和 lodash，可把它们抽成一个 vendor.js，避免重复打包。
立即学习“Java 免费学习笔记（深入）”；
- Webpack 默认开启，配置在
optimization.splitChunks下 - 常见策略：
chunks: 'all'（处理所有 chunk）cacheGroups自定义分组（如把 node_modules 里大于 100KB 的库单独打包） - 注意：它只影响构建时的静态分析，不能替代动态
import()的按需加载能力
手动分包 + script 标签（不推荐，仅作了解）
极少数场景下（如遗留系统无法改造构建流程），可将模块打包为 UMD 格式，通过动态创建 <script></script> 标签加载，并监听 load 事件回调。
- 缺点明显：无 tree-shaking、无类型提示、无法处理依赖嵌套、错误处理困难
- 需自行管理全局变量、加载状态、缓存、重复加载防护
- 现代项目应优先选择
import()+ 构建工具方案
基本上就这些。实际项目中，import() 解决「什么时候加载」，SplitChunks 解决「哪些东西该放一起」，两者配合使用效果最好。不需要追求极致分割，重点是识别真正「非首屏必需」的代码块。
