JavaScript代码分割的核心目标是按需加载模块以减小初始包体积、提升首屏速度；动态导入（import()）是标准实现方式，返回Promise，支持运行时路径决定、模板字符串拼接、浏览器原生支持及构建工具自动分包。
JavaScript 代码分割（Code Splitting）的核心目标是按需加载模块，减少初始包体积，提升首屏加载速度。动态导入（import()）是实现它的最常用、最标准的方式——它返回一个 Promise，支持在运行时决定加载哪个模块。
动态导入的基本用法
和静态 import 不同，import() 是一个函数调用，参数是模块路径（支持字符串模板），可在条件语句、事件回调、路由切换等任意位置使用：
- 写法示例：
const module = await import('./utils.js');或import('./modal.js').then(mod => mod.show()); - 路径必须是相对或绝对 URL，不能是纯变量（如
import(path)会报错），但可使用模板字符串拼接静态部分，比如import(`./locales/${lang}.js`)是合法的（Webpack/Vite 支持） - 浏览器原生支持（Chrome 63+、Firefox 67+、Safari 11.1+），无需额外 polyfill
配合 Webpack/Vite 实现自动分包
构建工具会识别 import() 调用，并把对应模块单独打包成 chunk 文件（如 234.a1b2c3.js），并在需要时异步加载：
- Webpack 中默认启用，无需配置；Vite 在开发和生产环境均自动处理
- 可添加 webpackChunkName 注释来命名 chunk：
import(/* webpackChunkName: "chart" */ './charts.js')，便于调试和缓存管理 - 多个
import()加载同一模块，只会请求一次（Promise 缓存机制保证）
常见实用场景
动态导入不是为了炫技，而是解决真实性能问题：
立即学习“Java免费学习笔记（深入）”；
-
路由级拆分：React Router / Vue Router 中，每个页面组件用
import()加载，实现“访问哪页才加载哪页” - 组件级懒加载：模态框、富文本编辑器、图表库等重型组件，在用户触发操作（如点击按钮）后再加载
- 条件性功能：根据浏览器能力、用户权限或 A/B 测试分组，动态加载不同逻辑模块
- 国际化资源：按语言动态加载翻译 JSON 或 locale 模块，避免全量打包所有语言
注意事项与优化建议
用好动态导入，有几个细节容易踩坑：
- 不要在循环中无节制地调用
import()，可能引发大量并发请求；必要时加节流或合并请求 - 记得处理加载失败（
.catch()或try/catch），比如展示错误提示或降级 UI - 服务端渲染（SSR）项目中，
import()默认只在客户端执行；如需 SSR 支持，需配合React.lazy + Suspense或框架特定方案（如 Nuxt 的defineAsyncComponent） - 首次加载 chunk 有网络延迟，可结合
prefetch或preload提前拉取（Webpack 的/* webpackPrefetch: true */注释）
基本上就这些。动态导入本身不复杂，关键是理解它何时该用、怎么配合构建工具和业务逻辑落地。用对了，首屏快一两秒，体验提升很明显。
