import() 是返回 Promise 的动态导入函数，用于路由懒加载、组件按需加载及普通模块按需加载，支持 Webpack/Vite 魔法注释优化 chunk 名称。
ESModule 的 import() 是一个返回 Promise 的函数，用于动态导入模块，特别适合实现路由懒加载和组件按需加载。它不会在编译时静态解析依赖，而是在运行时按需触发加载，从而拆分代码、减小首屏体积。
路由懒加载（以 Vue Router 为例）
在定义路由时，把组件的导入写成 import() 函数调用，而不是静态 import。这样 Webpack 或 Vite 会自动将该组件打包为独立 chunk。
- Vue Router 4（组合式 API）写法：
{
path: '/user',
name: 'User',
component: () => import('@/views/User.vue')
}注意：必须用箭头函数包裹 import()，否则会立即执行；import() 返回 Promise，Router 内部会自动处理异步加载逻辑。
React Router 中的懒加载（配合 React.lazy）
React 不原生支持 import() 直接用于组件渲染，需搭配 React.lazy 和 Suspense：
立即学习“Java免费学习笔记（深入）”；
- 定义懒加载组件：
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));- 在路由中使用，并包裹
<Suspense>处理加载状态：
<Suspense fallback={<Spinner />}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>普通模块的按需加载（非路由场景）
比如点击按钮后才加载某个工具类或 heavy 组件：
- 直接调用
import()并 await 结果：
async function handleOpenPDF() {
const { default: PDFViewer } = await import('./components/PDFViewer');
// 使用 PDFViewer 组件或方法
new PDFViewer().render();
}也可以解构命名导出（如果模块有具名导出）：
const { utils } = await import('./utils/math');注意：多次调用同一路径的 import() 会复用已缓存的模块，不会重复请求。
配合 Webpack 魔法注释优化 chunk 名称
可在 import() 中添加注释，让打包工具生成更可读的文件名：
component: () => import(/* webpackChunkName: "user-module" */ '@/views/User.vue')
Vite 也支持类似语法（/* viteIgnore */ 或直接识别 webpackChunkName），便于调试和 CDN 缓存管理。
