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 的函数，它让模块加载变成异步、可编程的操作：
- 可以在任意位置调用：条件判断、事件回调、路由切换时
- 模块路径可以是变量或表达式（但通常仍需静态可分析，例如不能是随机字符串）
- 加载成功后得到模块命名空间对象，可解构使用
常见用途：
漂亮的电子企业网站1.2
下载
这是一个免费的企业网站系统，任何人可以免费下载、修改和使用本程序，也可以用来为企业建网站。没有任何功能限制，且不发布收费版。容兴免费企业网站系统后台功能简介：1.基本设置：基本信息，联系方式，网站设置，导航管理，模块启闭，静态设置，安全设置，数据库管理2.产品管理：产品列表，添加产品，产品分类3.文章管理：文章列表，发表文章，文章分类，公司简介，网站公告4.客服互动：留言管理，在线客服，友情链接5
立即学习“Java免费学习笔记（深入）”；
// ✅ 动态导入：按需加载组件
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实现组件级懒加载
基本上就这些。静态是默认约束，动态是必要补充——不是替代，而是让加载更聪明。
