动态导入（import()）是代码分割的触发信号而非实现者，实际拆包由Webpack、Vite等构建工具在打包阶段完成；它要求模块上下文、正确MIME类型，并受字符串字面量限制。
JavaScript 动态导入（import()）本身不直接“实现”代码分割，而是触发构建工具（如 Webpack、Vite、Rollup）进行代码分割的信号。没有构建工具参与时，import() 只是加载一个完整的模块文件，不会自动拆包。
动态 import() 是分割的入口，不是分割逻辑本身
浏览器原生支持 import()，但它只负责按需获取并执行一个 JS 文件；真正的“把一个大 bundle 拆成多个小 chunk”是由构建工具在打包阶段完成的。你写 import('./module.js')，构建工具识别到这个调用后，会把 ./module.js 及其依赖抽成独立 chunk，并生成对应的加载逻辑。
- Webpack 会生成
0.js、1.js这类数字命名的 chunk 文件 - Vite 在生产构建时默认启用 code-splitting，
import()调用即触发分割 - 如果用
esbuild --bundle或未配置 split 的 Rollup，import()会被忽略或报错——它不理解动态导入语义
常见错误：在不支持的环境里误以为能分割
开发时用 Vite 本地跑没问题，但部署到仅托管静态文件的 CDN，又没配构建流程，就容易踩坑。此时 import('./feature.js') 看似运行成功，其实只是加载了未分割的完整 feature.js，毫无性能收益。
- 错误现象：
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain"—— 服务器没返回Content-Type: application/javascript - 错误现象：
Uncaught SyntaxError: Cannot use import statement outside a module—— HTML 中没加type="module"，或脚本未被当作模块执行 - 关键点：动态导入必须运行在模块上下文中，HTML 中的主脚本要带
type="module"，且服务端要正确返回 JS MIME 类型
import() 的参数和加载时机决定分割粒度
传入的字符串不能是变量拼接（如 import('./' + name + '.js')），否则 Webpack 无法静态分析，可能打包进所有匹配模块，或直接报错；Vite 则会在构建时报 Dynamic import cannot be analyzed。
立即学习“Java免费学习笔记（深入）”；
- ✅ 支持：
import('./utils/date.js')、import(`./locales/${lang}.json`)（Webpack 支持简单模板字面量） - ❌ 不支持：
import('./' + path)、import(someVar)、import(condition ? './a' : './b') - 加载时机：调用
import()返回 Promise，真正发起网络请求是在 Promise 被 resolve 时（即执行到该行），不是定义时 - 副作用：如果目标模块有顶层副作用（如直接执行初始化逻辑），它会在首次
import()resolve 后立即运行
和 React.lazy / defineAsyncComponent 的关系
这些是框架层封装，底层仍基于 import()。比如 React.lazy(() => import('./MyComponent'))，只是把动态导入包装成可被 Suspense 捕获的异步组件；Vue 的 defineAsyncComponent 同理。
- 它们不改变分割行为，只改变使用方式和错误边界处理
- 如果你手动
import()后再setState或createApp，效果等价，但失去框架的 loading/error fallback 能力 - 注意：
React.lazy只支持默认导出，而原生import()支持命名导出（import('./x').then(m => m.MyFunc)）
最易被忽略的一点：动态导入的 chunk 文件名和哈希控制，完全依赖构建工具配置。比如 Webpack 的 output.chunkFilename 或 Vite 的 build.rollupOptions.output.entryFileNames，不显式配置时，长期缓存和 CDN 缓存策略可能失效。
