动态导入与代码分割通过按需加载提升性能。1. 动态import()实现运行时条件加载，适用于按钮触发、路由切换等场景；2. 构建工具据此拆分代码，生成独立chunk，支持路由分离、vendor提取；3. 配合React.lazy和Suspense优化异步组件加载；4. preload/prefetch提示浏览器预加载资源，减少等待；5. 魔法注释控制chunk行为，合理设计命名与缓存策略可进一步优化体验。
现代JavaScript开发中，模块化是组织代码的核心方式。随着应用规模扩大，一次性加载所有代码会影响性能。为解决这个问题，动态导入（Dynamic Import）和代码分割（Code Splitting）成为关键手段。它们让开发者能按需加载模块，提升首屏加载速度，优化用户体验。
动态导入：按需加载模块
传统静态 import 语句在模块解析时就确定依赖，而动态导入使用 import() 函数语法，返回一个 Promise，允许在运行时条件性地加载模块。
这特别适合以下场景：
- 用户操作触发的功能模块，如弹窗组件或设置面板
- 路由切换时加载对应页面
- 根据不同环境或权限加载不同实现
示例：点击按钮时才加载日志工具
立即学习“Java免费学习笔记（深入）”；
const button = document.getElementById('load-logger');button.addEventListener('click', async () => {
const { logger } = await import('./logger.js');
logger.log('模块已加载');
});
代码分割：拆分打包输出
代码分割不是语言特性，而是构建工具（如Webpack、Vite、Rollup）提供的能力。它利用动态导入语句，在打包时自动将模块拆分为多个文件（chunks），实现异步加载。
常见分割策略包括：
- 按路由拆分：每个页面生成独立 bundle
- 第三方库单独打包：vendor chunk 提升缓存利用率
- 公共模块提取：避免重复加载
例如，在 SPA 中使用 React Router：
const Home = () => import('./pages/Home.js');const About = () => import('./pages/About.js');
// 路由配置中使用异步加载
{ path: '/home', component: React.lazy(Home) }
React.lazy 配合 Suspense 可优雅处理加载状态。
预加载与预连接优化体验
动态加载虽好，但网络延迟可能影响交互响应。可通过 link 标签提示浏览器提前准备资源。
- preload：告诉浏览器当前页面很快会用到某资源，立即开始加载
- prefetch：预测用户下一步行为，空闲时预取可能需要的模块
在 HTML 中添加：
<link rel="prefetch" href="/static/about.chunk.js" as="script"><link rel="preload" href="/utils/validator.js" as="script">
构建工具通常支持魔法注释来控制 chunk 行为：
import(/* webpackPrefetch: true */ './modal.js')基本上就这些。动态导入赋予 JavaScript 灵活的模块控制力，结合构建工具的代码分割，能显著减少初始加载量。合理使用预加载策略，还能抹平异步加载带来的等待感。这种“按需获取”的思路，是现代前端工程优化的核心之一。不复杂但容易忽略细节，比如 chunk 命名和缓存策略，实际项目中值得仔细设计。
