动态 import() 不能写在顶层作用域，因为它是异步函数调用、返回 promise，非静态声明，顶层使用会报 syntaxerror；必须置于函数体、条件分支或事件回调中。
动态 import() 为什么不能写在顶层作用域
因为 import() 是异步函数调用，返回 Promise，不是静态声明；写在模块顶层会直接报错 SyntaxError: Unexpected token 'import'（ES2020 前）或被解析器拒绝。它只能出现在函数体、条件分支、事件回调等运行时可执行的位置。
常见错误是想在 script type="module" 的顶层直接写：
import('./utils.js'); // ❌ 语法错误必须包一层函数：
- 放在
click、load等事件处理中 - 作为
async函数的 await 表达式 - 在
if或switch分支里按需触发
如何正确 await 动态 import() 并使用导出成员
import() 返回 Promise，解构其默认导出或命名导出需等待 resolve 后操作。不能直接 import('./a.js').default.xxx() —— 这会报 Cannot read property 'xxx' of undefined。
推荐写法是 await 后再访问：
async function loadAndUse() {
const module = await import('./math.js');
module.add(2, 3); // ✅ 正确
// 或解构：
const { multiply } = await import('./math.js');
multiply(4, 5);
}
- 如果模块只有默认导出，用
const mod = await import('./x.js'); mod.default?.foo() - 命名导出多时，解构更清晰；但注意：解构本身不支持
await，必须先await import()再解构 - 不要在
try/catch外直接 await，失败会抛未捕获异常
动态 import() 路径必须是字符串字面量或模板字符串常量
Vite、Webpack、Rollup 等打包工具靠静态分析识别动态导入路径，以便生成分包。若写成变量拼接或运行时计算，会导致打包失败或回退到全量加载：
const name = 'utils';
import(`./${name}.js`); // ❌ 不会被识别为有效动态导入（webpack/vite 中失效）
只允许以下形式：
-
import('./a.js')（字符串字面量） -
import(`./${process.env.NODE_ENV}.config.js`)（模板字符串，且插值为编译期已知常量） - Webpack 5+ 支持有限的表达式，如
import('./' + basename + '.js')仅当basename是字符串字面量才生效
否则构建时无法切分 chunk，甚至报 Dynamic require is not supported 类错误。
配合 loading 状态和错误降级的实际写法
真实场景中，网络延迟、404、CSP 阻止等都可能导致 import() 拒绝。不能只写 await import() 就完事。
典型健壮写法：
async function renderChart() {
try {
setStatus('loading');
const { Chart } = await import('./chart.js');
new Chart(container);
} catch (err) {
console.error('Chart load failed:', err);
showError('图表加载失败，请刷新重试');
} finally {
setStatus('idle');
}
}
- 显式控制 UI 状态（如禁用按钮、显示 spinner）
- 捕获具体错误：可能是
TypeError: Failed to fetch（网络问题），也可能是TypeError: Cannot instantiate cyclic dependency（循环引用） - 避免多次并发触发同一 import：可用
let chartModulePromise; if (!chartModulePromise) chartModulePromise = import(...)缓存 Promise
动态 import 的核心价值不在“能加载”，而在于“可控地加载”——路径约束、错误边界、状态反馈，这三块漏掉任何一块，上线后都容易变成静默失败。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
