17370845950

JavaScript模块默认静态，import/export必须在顶层，依赖关系编译前确定；动态import()返回Promise，支持运行时按需加载，二者分工明确、互补共存。

JavaScript 模块默认是静态的，意思是 import/export 语句必须出现在顶层作用域，且模块依赖关系在代码执行前就已确定、不可更改。这带来编译时可分析、支持 Tree-shaking、利于工具优化等好处，但也限制了按需加载和运行时决策的能力。

静态模块的核心表现

你不能把 import 写在函数里、条件分支中，或循环内部——语法上直接报错：

// ❌ 语法错误：import 只能在模块顶层
if (condition) {
  import { foo } from './module.js'; // SyntaxError
}

• 所有 import 语句在模块加载时立刻解析，不等待执行
• 打包器（如 Webpack、Vite）能提前构建依赖图，剔除未使用的导出（Tree-shaking）
• IDE 和类型系统能准确跳转、推断类型，因为路径和导出名是固定的

动态导入（import()）补足运行时灵活性

import() 是一个返回 Promise 的函数，它让模块加载变成异步、可编程的操作：

• 可以在任意位置调用：条件判断、事件回调、路由切换时
• 模块路径可以是变量或表达式（但通常仍需静态可分析，例如不能是随机字符串）
• 加载成功后得到模块命名空间对象，可解构使用

常见用途：

// ✅ 动态导入：按需加载组件
button.addEventListener('click', async () => {
  const { Modal } = await import('./Modal.js');
  new Modal().show();
});

// ✅ 根据环境加载不同实现
const api = await import(`./api/${ENV}.js`);

静态与动态不是互斥，而是分工明确

静态 import 管“结构”——定义模块间稳定契约；动态 import() 管“时机”——控制资源何时进入内存。

• 核心逻辑、公共工具库用静态导入，保障可维护性和构建优化
• 大体积代码（如图表库、富文本编辑器）、低频功能、A/B 测试分支、路由级模块，适合动态导入
• 搭配 React.lazy 或 defineAsyncComponent 实现组件级懒加载

基本上就这些。静态是默认约束，动态是必要补充——不是替代，而是让加载更聪明。