动态 import() 通过函数调用实现运行时按需加载模块，返回 promise，支持条件加载、懒加载和代码分割；路径须为字符串字面量或静态可分析模板字符串，常用于 react.lazy、vue defineasynccomponent 及路由懒加载。
JavaScript 中使用动态 import() 实现按需加载模块组件，核心是把 import 当作函数调用，返回一个 Promise，从而在运行时决定加载哪个模块。它不依赖构建工具的静态分析，天然支持条件加载、懒加载和代码分割。
基本语法：用函数形式导入模块
动态 import() 是一个表达式，接受模块路径（字符串）作为参数，返回 Promise，解析后得到模块对象：
const module = await import('./MyComponent.js');// 或者import('./MyComponent.js').then(module => { const Component = module.default;});
注意：路径必须是字符串字面量或能被静态分析的模板字符串（如 `./${name}.js` 中 name 是常量），不能是完全动态拼接的变量，否则打包工具无法做代码分割。
在 React/Vue 中按需加载组件
以 React 为例，结合 React.lazy 和 Suspense 可实现组件级懒加载（底层就是动态 import）：
const LazyChart = React.lazy(() => import('./Chart.js'));function Dashboard() { return ( <suspense fallback="<div>Loading...</div>"></suspense> <lazychart></lazychart> );}
Vue 3 中类似：
const Chart = defineAsyncComponent(() => import('./Chart.vue'));
配合路由实现页面级懒加载
在前端路由中（如 Vue Router 或 React Router），可直接对路由组件使用动态 import：
- Vue Router：
{ path: '/admin', component: () => import('@/views/AdminView.vue')}
- React Router v6：
<route><br><code> path="/admin" element={ <suspense fallback="Loading..."></suspense> <adminview></adminview> } />
这样访问 `/admin` 时才加载对应 JS chunk，首次加载体积更小。
手动控制加载时机与错误处理
你也可以脱离框架，在任意逻辑中触发加载，比如用户点击按钮后才加载某个重型编辑器：
async function loadEditor() { try { const { default: MonacoEditor } = await import('monaco-editor'); renderEditor(MonacoEditor); } catch (err) { console.error('Editor load failed:', err); showError('编辑器加载失败，请重试'); }}
这种写法适合非渲染场景，比如按需加载工具函数、第三方 SDK、主题包等。
不复杂但容易忽略：动态 import() 加载的模块默认是独立 chunk，现代打包工具（Vite、Webpack）会自动提取并命名，无需额外配置；但路径必须可静态分析，否则会退化为全量加载或报错。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
