JS 中动态导入常见反模式怎么规避-js教程-PHP中文网

动态导入需正确使用：循环/条件中调用须缓存promise；必须try/catch处理失败并降级；路径拼接要白名单校验；仅在async函数或promise链中调用。

js 中动态导入常见反模式怎么规避

动态导入（import()）本身是优化加载性能的好工具，但用法不当会引入可维护性、安全性或运行时错误等反模式。关键不是“少用”，而是“用对”。

把 import() 当作 require() 随意调用

常见表现：在循环、条件分支或事件回调里反复调用 import()，却不做缓存或状态管理。

问题：每次调用都发起新请求，可能重复加载同一模块；多次触发 Promise，难以统一控制加载状态和错误处理
建议：对同一模块路径做简单缓存，例如用 Map 存储已发起的 Promise

示例：

const importCache = new Map();
function loadModule(path) {
  if (!importCache.has(path)) {
    importCache.set(path, import(path));
  }
  return importCache.get(path);
}

忽略加载失败，不处理 reject

常见表现：只写 await import(...)，没包 try/catch，也没 fallback 逻辑。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

问题：网络中断、路径错误、模块不存在时直接抛未捕获异常，导致页面白屏或功能静默失效
建议：始终包裹 try/catch，并提供降级方案（如默认空对象、提示、占位组件）

示例：

try {
  const { default: Chart } = await import('./charts/BarChart');
  renderChart(Chart);
} catch (err) {
  console.warn('图表模块加载失败，使用简化版', err);
  renderFallbackChart();
}

拼接路径字符串，引入注入风险

常见表现：用用户输入或变量拼接 import() 的路径，例如 import(`./locales/${lang}.js`)。

问题：若 lang 来自 URL 参数或表单，攻击者可构造 ../../etc/passwd 类路径，造成模块加载越界或报错泄露信息
建议：严格校验路径参数，只允许预设白名单；或改用静态映射表

示例：

const validLocales = ['zh-CN', 'en-US', 'ja-JP'];
const lang = new URLSearchParams(location.search).get('lang') || 'en-US';
if (!validLocales.includes(lang)) throw new Error('Invalid locale');
await import(`./locales/${lang}.js`);

在非异步上下文中滥用 import()

常见表现：在普通函数里直接写 import('./utils.js')，没用 await 或 .then()。

问题：import() 返回 Promise，不处理就等于丢弃，后续逻辑无法拿到模块内容，还可能引发 “Promise returned in function argument where a void return was expected” 类型警告
建议：确保调用处处于 async 函数内，或显式链式处理 Promise；避免在同步逻辑中“假装”已加载完成