静态 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
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
