动态导入（import()）是实现代码分割的必要手段，因其在构建时被工具识别为异步入口，从而将目标模块抽离为独立 chunk；而静态 import 在编译期即合并入主包。
动态导入（import()）本身不等于代码分割，但它是实现代码分割的必要手段；没有它，Webpack 或 Vite 无法自动拆包。
为什么 import() 调用会触发代码分割
静态 import 在编译期就被解析，所有模块被合并进初始包；而 import() 是一个返回 Promise 的函数调用，构建工具（如 Webpack、Vite、esbuild）在扫描到它时，会把目标模块单独抽成一个 chunk，而不是塞进主 bundle。
- 必须是字符串字面量或模版字面量（如
import(`./pages/${page}.js`)），不能是变量拼接（import(path)会失败） - Webpack 中默认生成
1.js、2.js这类数字命名 chunk，可通过/* webpackChunkName: "login" */注释控制文件名 - Vite 默认使用
import.meta.env.PROD判断是否启用，开发时仍是 inline 模块，不影响 HMR
import() 常见报错和修复方式
最常见的错误不是语法问题，而是路径解析失败或环境不支持：
-
Dynamic imports are not currently supported：老版本 Babel（@babel/plugin-syntax-dynamic-import，或打包器配置遗漏dynamicImport选项 -
Cannot find module './xxx.js'：路径在运行时不存在，尤其在模版路径中（import(`./pages/${name}.js`)），需确保所有可能值对应的真实文件存在，否则会抛404或chunk load error - React Router v6.4+ 中用
lazy(() => import('./Page'))报错：必须配合Suspense，否则组件挂载时 Promise 未 resolve 就渲染，直接白屏
代码分割后 chunk 加载时机与性能影响
拆得太多或太随意，反而降低性能——每个 chunk 都是额外 HTTP 请求，且 JS 执行有开销。关键看加载时机是否匹配用户行为：
立即学习“Java免费学习笔记（深入）”；
-
路由级拆分（如每个
Route对应一个import()）通常收益最大，因为用户大概率只访问其中一部分 - 组件级拆分（如按钮点击后才加载图表库）适合大依赖（
import('chart.js')），但要注意避免「点一下等三秒」的体验断层 - 注意预加载：
import(/* webpackPrefetch: true */ './Report.js')会在空闲时下载，适合预测性场景；webpackPreload则优先级更高，适合即将用到的资源 - Treeshaking 和代码分割是两回事：
import { debounce } from 'lodash'即使没拆 chunk，Webpack 也能剔除其他方法；但import _ from 'lodash'+ 动态导入，才能把整个包单独拎出来
真正难的不是写 import()，而是判断哪段逻辑值得拆、拆完要不要加 loading 状态、出错时怎么 fallback——这些都得结合监控数据和用户路径来定，不是加个括号就完事。
