动态 import 是指通过 import() 语法在运行时按需加载模块，与静态 import 立即加载不同，它返回 Promise，支持代码分割与懒加载。结合 React.lazy 可实现路由级分割，用户访问时才加载对应组件；也可用于条件性加载重功能，如点击触发或空闲预加载。构建工具如 Webpack、Vite 原生支持，需配置 chunk 分割、命名及魔法注释优化管理。合理使用可显著减少首屏体积，提升加载性能。
在现代前端开发中，随着应用体积不断增大，首屏加载时间可能显著增加。为优化用户体验，代码分割（Code Splitting）与懒加载（Lazy Loading）成为关键手段。其中，动态 import() 是实现这些策略的核心技术之一。
什么是动态 import
与静态 import 在模块顶层立即加载不同，动态 import() 返回一个 Promise，允许在运行时按需加载模块。这使得我们可以在特定条件触发时才加载某段代码，比如用户点击某个按钮或进入某个路由。
示例：
button.addEventListener('click', async () => {
const module = await import('./heavyFeature.js');
module.init();
});
上面的代码只有在用户点击按钮后才会加载 heavyFeature.js，避免了初始加载时的资源浪费。
路由级代码分割
在单页应用（SPA）中，将每个路由对应的组件拆分为独立的代码块能显著减少首页加载量。结合框架如 React 或 Vue，配合 Webpack、Vite 等构建工具，可轻松实现。
以 React 为例，使用 React.lazy 和动态 import 按需加载路由组件：
const Home = React.lazy(() => import('./routes/Home'));
const About = React.lazy(() => import('./routes/About'));
function App() {
return (
);
}
Webpack 会自动将这些模块打包成单独的 chunk，当用户访问对应路径时才加载。
条件性功能懒加载
某些功能仅在特定场景下使用，例如图片编辑器、数据导出工具等。这类“重”功能适合通过动态 import 延迟加载。
常见做法包括：
- 用户打开模态框时加载对应逻辑
- 检测到特定设备能力后再加载相关脚本
- 页面空闲时预加载可能用到的模块（结合 IntersectionObserver 或 requestIdleCallback）
这样既保证核心功能快速响应，又不牺牲完整体验。
构建工具的配合支持
动态 import 能否生效，依赖于构建工具是否支持代码分割。Webpack、Rollup、Vite 等主流工具都原生支持。
注意点：
- 确保输出配置中启用 chunk 分割（如 optimization.splitChunks）
- 合理命名生成的 chunk 文件，便于调试和缓存管理
- 使用魔法注释控制打包行为，例如：
() => import(/* webpackChunkName: "chart" */ './charts.js')
通过这些配置，可以更精细地控制代码分割结果，提升加载效率。
基本上就这些。动态 import 不复杂但容易忽略，用好它能让应用启动更快、运行更轻盈。
