import() 是返回 Promise 的动态导入函数，支持运行时按需加载、路径动态拼接（需静态可分析）、条件触发及错误降级，兼容现代浏览器，不具 hoisting 特性且可置于任意代码块中。
JavaScript 中的 import() 是一个函数式动态导入语法，返回 Promise，用于在运行时按需加载模块，不依赖构建工具就能实现代码分割和懒加载。
基本用法：异步加载单个模块
import() 接收一个模块路径字符串（支持变量拼接），执行后返回一个解析为模块对象的 Promise。常配合 await 使用：
- 加载默认导出：
const module = await import('./utils.js');→module.default - 加载命名导出：
const { helper } = await import('./helpers.js'); - 路径可动态生成：
const lang = 'zh'; const dict = await import(`./locales/${lang}.js`);
结合条件或事件触发按需加载
适合在用户交互、路由切换、功能首次使用时加载，避免初始包体积过大：
- 按钮点击后加载图表库：
button.addEventListener('click', async () => { const Chart = (await import('chart.js')).default; new Chart(ctx, config); }); - 路由级懒加载（如 SPA）：
const Home = () => import('./pages/Home.vue'); // Vue 中常用写法 - 错误边界中降级加载备用组件：
try { await import('./HeavyComponent.js'); } catch { await import('./LightFallback.js'); }
注意路径限制与兼容性
import() 的模块路径必须是**静态可分析的字符串片段**（不能是完全运行时拼接的任意字符串），否则打包工具（如 Webpack、Vite）无法做代码分割：
立即学习“Java免费学习笔记（深入）”；
- ✅ 支持：
import(`./modules/${name}.js`)（Vite/Webpack 可识别通配符） - ❌ 不支持：
import(someVar)或import(url + '.js')（无法预知加载哪些文件） - 浏览器兼容性：Chrome 63+、Firefox 67+、Safari 11.1+、Edge 79+；旧环境需搭配 Babel（
@babel/plugin-syntax-dynamic-import）转译语法，但实际加载仍需原生支持或 polyfill（如 SystemJS）
与静态 import 对比的关键差异
动态 import() 不是静态声明，因此不受 import 的提升（hoisting）和严格作用域限制：
- 可在 if、for、函数内部、甚至 try/catch 中调用
- 不会阻塞模块初始化，不影响当前模块的
export声明 - 每次调用都可能发起新请求（浏览器会缓存，但模块实例不自动共享）；如需复用，建议缓存 Promise：
const loadLodash = (() => { let p; return () => p ?? (p = import('lodash')); })();
