javascript模块动态导入是什么_如何按需加载代码？

静态 import 无法按需加载，因其编译时确定、强制顶层声明、初始全量加载；import() 返回 Promise，支持运行时路径、动态条件、自动去重，需错误处理与加载状态管理。

JavaScript 模块动态导入（import()）是真正按需加载代码的机制，它返回一个 Promise，而不是像静态 import 那样在模块初始化时就加载并执行依赖。

为什么不能用静态 import 实现按需加载？

静态 import 是编译时确定的，必须写在模块顶层，且所有被导入的模块会在当前模块加载时一并下载、解析、执行——哪怕你只在某个按钮点击后才用到它。

常见错误现象：import { heavyFunction } from './heavy-module.js' 放在文件顶部，导致首屏加载时间变长，即使 heavyFunction 从未被调用。

• 静态 import 无法放在 if、try、函数内部等运行时逻辑中
• 打包工具（如 Webpack、Vite）会把静态 import 当作“必须存在”的依赖，直接打进初始包
• 无法根据用户行为、设备类型或网络条件动态决定是否加载

如何正确使用 import() 实现按需加载？

import() 是一个函数调用，接收模块路径字符串，返回 Promise，resolve 后得到模块对象。它支持表达式，可动态拼接路径。

典型场景：点击按钮后加载富文本编辑器、路由切换时加载对应页面、条件性加载国际化的语言包。

button.addEventListener('click', async () => {
  try {
    const { default: Editor } = await import('./editor.js');
    const editor = new Editor();
  } catch (err) {
    console.error('编辑器加载失败:', err);
  }
});

• 路径必须是字符串字面量或能被构建工具静态分析的表达式（例如 import(`./locales/${lang}.js`) 可被 Vite/Webpack 处理；但 import(url) 中 url 是运行时变量则会报错或 fallback 到 fetch）
• 不能解构默认导出以外的命名导出（如 import('./mod.js').then(({ foo }) => {...}) 不推荐，应先取 default 或整个模块对象）
• 多个 import() 调用会被自动去重：同一路径并发触发多次，底层只加载一次

import() 在不同环境下的表现差异

浏览器原生支持 import()（Chrome 63+、Firefox 67+、Safari 11.1+），但 Node.js 需要启用 --experimental-modules（v12+）或使用 ESM 模式（v14+），且路径必须带扩展名（如 import('./util.js')），不支持自动解析 .js。

构建工具影响显著：

• Vite：默认将 import() 转为异步 chunk，支持 /* @vite-ignore */ 跳过预构建
• Webpack：生成独立 xxx.chunk.js，支持魔法注释如 /* webpackChunkName: "editor" */
• 若使用 CommonJS（require）混用，import() 仍有效，但无法跨格式共享缓存

容易忽略的细节和坑

最常被忽略的是错误处理和加载状态管理——import() 失败不会阻塞主线程，但也不会静默吞掉异常；没做 loading 提示会导致用户以为点击无响应。

• 必须 catch 错误，否则 unhandled promise rejection
• 路径拼错、网络中断、CORS、MIME 类型不匹配（如服务器返回 text/plain 而非 application/javascript）都会导致 reject
• 服务端未正确配置 MIME 类型（尤其本地 file:// 协议下）会直接失败
• Vite 开发模式下，import('@/components/xxx.vue') 中的 @ 别名可被解析；但生产环境若未配好 base 或 public 目录，可能 404