动态 import() 是返回 promise 的运行时按需加载函数，静态 import 是顶层声明式编译期绑定；前者支持变量路径、触发代码分割，后者被提前打包进主包。
动态 import() 是什么，和静态 import 有什么本质区别？
动态 import() 是一个返回 Promise 的函数，它允许你在运行时按需加载模块，而不是在编译/解析阶段就全部引入。静态 import 会被打包工具（如 Webpack、Vite）提前分析、合并进初始包，哪怕你只在某个条件分支里用到它。
关键区别在于：静态 import 是声明式、编译期绑定；动态 import() 是表达式、运行时求值，因此能触发真正的代码分割（code splitting）。
- 静态
import写法：import { foo } from './utils.js'→ 必须在顶层，不能写在if或函数内 - 动态
import()写法：const { foo } = await import('./utils.js')→ 可出现在任意位置，支持变量路径（如import(`./pages/${page}.js`)） - 打包后：静态导入的模块会归入
main.js或其依赖图；动态导入的模块会被单独生成xxx.chunk.js文件
哪些场景下用动态 import() 最有效？
不是所有 import 都值得改成动态的。重点是「用户不一定访问」或「可延迟加载」的逻辑块。
-
路由级分割：React/Vue 路由组件用
import()加载，比如component: () => import('./views/Home.vue')，让每个页面只在导航时拉取对应 JS -
条件性功能模块：例如富文本编辑器（
import('quill')）、图表库（import('chart.js')），仅在用户点击“编辑”或“查看报表”时加载 -
大型工具类按需加载：比如 PDF 生成（
import('pdfmake')）、图像处理（import('sharp')），避免污染首屏资源 -
错误边界降级加载：当主模块加载失败，可 fallback 到轻量替代实现，例如
import('./fallback-logger.js').catch(() => import('./noop-logger.js'))
常见坑：路径别名、打包产物、import() 中的变量怎么处理？
动态 import() 的路径必须能让打包工具静态分析出可能的模块范围，否则会报错或全量打包。
立即学习“Java免费学习笔记（深入）”；
-
别名不生效：Webpack/Vite 的
@/别名在import('@utils/api')中无效，得写真实相对路径，如import('../utils/api.js') -
变量路径受限：不能写
import(someVar)，但支持模板字符串中的**静态部分+有限变量**，例如import(`./locales/${lang}.json`)是 OK 的（lang是字符串字面量或枚举值），而import(`./${userInput}.js`)会导致打包器报错或生成全部匹配文件 -
默认导出要解构正确：如果模块只有
export default，应写const mod = await import('./mod.js'); mod.default.xxx()，而不是const { xxx } = await import('./mod.js')（后者会报xxx is not exported） -
SSR 环境需注意：Node.js 里
import()是异步的，但某些 SSR 框架（如 Nuxt）需要显式标记/* webpackMode: "eager" */或用defineAsyncComponent封装，否则服务端渲染时可能漏内容
对比实测：加了动态 import() 后首屏 JS 体积变化多大？
以一个含 3 个页面（Home、Dashboard、Report）的 React 应用为例：
// 打包前（全静态 import）
// src/App.js
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Report from './pages/Report';
<p>// 打包后 main.js：1.2 MB（含全部页面逻辑 + 公共依赖）</p><p>// 改为动态 import 后
// src/App.js
const Home = () => import('./pages/Home');
const Dashboard = () => import('./pages/Dashboard');
const Report = () => import('./pages/Report');</p><p>// 打包后：
// main.js：380 KB（仅路由框架 + 公共基础库）
// Home.chunk.js：420 KB
// Dashboard.chunk.js：610 KB
// Report.chunk.js：890 KB首屏 JS 体积从 1.2 MB 降到 380 KB，下降近 70%。实际加载中，浏览器只请求 main.js 和当前路由所需 chunk，其余 chunk 在用户跳转前完全不下载。
真正容易被忽略的是：动态 import() 的 chunk 本身也参与 tree-shaking 和压缩，且现代打包器（如 Vite）会对它们自动启用 preload 或 prefetch 策略——但 prefetch 是空闲时才加载，不会抢首屏带宽。
