动态导入（import()）是按需加载模块的手段，按需引入需组件库支持ESM细粒度导出、构建工具配置及手动/自动导入协同；如element-plus需import('element-plus/es/components/button')，配合defineAsyncComponent可实现Vue组件级懒加载。
JavaScript 中动态导入（import()）本身不直接实现组件库的“按需引入”，它只是按需加载模块，而真正的按需引入需要结合组件库的模块化设计、构建工具配置和手动/自动的导入方式。关键在于：动态导入是手段，按需引入是目标，二者需协同工作。
组件库必须支持 ES 模块（ESM）和细粒度导出
只有当组件库以 ESM 形式发布，并将每个组件（如 Button、Dialog）单独导出为独立文件（例如 node_modules/xxx/lib/Button/index.js），才能真正按需加载。常见支持该结构的库有：ant-design（配合 babel-plugin-import）、element-plus（原生支持 ESM）、naive-ui、arco-design 等。
- ✅ 正确示例（可被动态导入）：
import('element-plus/es/components/button')或import('naive-ui/lib/button') - ❌ 错误示例：
import('element-plus')—— 这会加载整个包，失去按需意义
用 import() 手动按需加载单个组件（适合低频/条件性场景）
适用于点击弹窗才加载 Dialog、进入报表页才加载 Chart 等明确延迟加载逻辑的场景。注意返回的是 Promise，需配合 await 或 .then() 使用。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
async function openReportDialog() {
const { default: Dialog } = await import('element-plus/es/components/dialog');
// 注意：部分库导出的是具名对象，需查文档，如：
// const { ElDialog } = await import('element-plus/es/components/dialog');
Dialog.open({ title: '报表预览' });
}
- 导入路径必须精确到组件子模块（不是主入口），路径格式取决于库的打包输出结构
- 组件可能依赖样式，需额外加载 CSS，例如：
import('element-plus/es/components/dialog/style/css') - 若组件含内部依赖（如图标、工具函数），确保其也被正确解析（通常现代构建工具如 Vite / Webpack 5+ 支持自动处理）
构建工具 + 插件实现「透明按需」（推荐用于常规开发）
手动写 import() 易出错且重复。更实用的方式是借助构建工具在编译期自动重写静态 import 语句，把 import { Button } from 'ant-design-vue' 自动转为 import Button from 'ant-design-vue/es/button'，再由动态导入或普通导入加载——这叫“编译时按需”。
立即学习“Java免费学习笔记（深入）”；
- Vite：使用
unplugin-vue-components（推荐）+unplugin-auto-import，自动导入组件并提取对应子模块 - Vue CLI / Webpack：配置
babel-plugin-import（适配 antd、vant 等） - 注意：这些插件默认处理的是静态
import；如需进一步懒加载，可配合defineAsyncComponent（Vue）或React.lazy（React）封装
Vue 中结合 defineAsyncComponent 实现组件级懒加载
这是最贴近“按需引入 UI 组件”的典型实践：既减少首屏体积，又保持模板中声明式写法。
import { defineAsyncComponent } from 'vue';
export default {
components: {
ElButton: defineAsyncComponent(() => import('element-plus/es/components/button')),
ElInput: defineAsyncComponent(() => import('element-plus/es/components/input'))
}
};
- 组件首次渲染时才触发
import()，加载完成后挂载 - 支持 loading / error 状态（传入配置对象），提升用户体验
- 搭配
unplugin-vue-components可免写重复代码，插件自动生成上述异步组件注册
