JavaScript模块加载器是解析、获取、执行模块并管理依赖的系统，涵盖浏览器原生ES模块、构建工具（如Webpack、Vite）及运行时加载器（如SystemJS）；动态导入import()是ES2020引入的Promise-based运行时按需加载机制，支持表达式路径、不参与静态分析、可错误捕获；浏览器原生加载器遵循同源策略与MIME校验，按需请求、解析模块图、实例化并缓存；构建工具将其转为异步chunk并注入运行时逻辑；使用时需注意默认导出访问方式、模块上下文限制及Node.js兼容性要求。
JavaScript的模块加载器是负责解析、获取、执行模块代码，并管理模块依赖关系的系统。它不单指某个库，而是涵盖浏览器原生支持（如ES模块）、构建工具（如Webpack、Vite）以及运行时加载器（如SystemJS）等不同层级的实现机制。动态导入（import()）是ES2020标准引入的语法，它让模块可以在运行时按需加载，而非在编译/解析阶段静态确定。
浏览器原生模块加载器如何工作
现代浏览器内置了ES模块加载器，它遵循严格的同源策略和MIME类型校验（脚本必须以application/javascript或module类型提供）。当遇到或import()调用时，加载器会：
- 发起HTTP请求获取模块文件（支持相对路径、绝对URL、甚至data URL）
- 解析模块图（module graph），识别
import语句声明的依赖 - 对每个模块进行实例化（resolve exports binding）和求值（execute）
- 缓存已加载模块，避免重复获取和执行
import() 动态导入的关键特性
import() 是一个返回 Promise 的函数，不是声明式语法。它允许你把模块加载时机推迟到运行时，比如根据用户操作、设备能力或路由变化来决定加载哪个模块：
- 支持表达式：路径可以是变量拼接（
import(`./pages/${page}.js`)），但不能是完全动态的任意字符串（如用户输入）——路径需能被构建工具或浏览器静态分析出可能取值范围 - 不参与静态依赖分析：不会被打包工具提前打包进初始包，适合做代码分割（code splitting）
- 可配合
try/catch处理加载失败，例如网络错误或404
构建工具中的模块加载器角色
像Webpack或Vite这类工具，在开发和构建阶段模拟并增强模块加载行为：
立即学习“Java免费学习笔记（深入）”；
- 将
import()转换为异步chunk，生成带哈希的独立JS文件 - 注入运行时加载逻辑（如
__webpack_require__.e），接管import()调用，实现懒加载和预加载 - Vite利用浏览器原生ES模块，在开发时直接请求源文件；生产构建则生成优化后的产物，仍保留
import()语义
常见误区与注意事项
动态导入不是“万能加载器”，使用时要注意：
-
import()加载的是模块对象，默认导出需通过.default访问（除非用命名空间导入：import * as mod from './x.js'） - 无法在非模块脚本（
）中直接使用，必须在模块上下文（type="module"或另一个import()内部）中调用 - Node.js中需启用
--experimental-modules（旧版）或使用.mjs扩展名+type: "module"字段，且import()只支持本地文件或URL，不支持CommonJS模块混用（除非通过createRequire桥接）
