懒加载与动态导入本质是按需加载技术，核心为动态import()语法，支持运行时调用、变量路径和构建工具代码分割，用于路由、交互、视口等场景，需结合实际性能权衡使用。
JavaScript 中的懒加载（Lazy Loading）和动态导入（Dynamic Import）本质是同一类技术——按需加载模块或资源，避免初始加载时一次性载入全部代码，从而提升首屏性能和减少内存占用。核心实现方式就是 动态 import() 语法。
动态 import() 是懒加载的基础
与静态 import 不同，import() 是一个函数，返回 Promise，支持在运行时、条件分支、事件回调等任意位置调用：
- 它不参与构建时的依赖分析（Webpack/Rollup 会自动做 code-splitting）
- 导入路径可以是变量、拼接字符串，甚至带表达式（但不能是完全动态的 URL，需可静态分析）
-
浏览器原生支持（Chrome 63+、Firefox 67+、Safari 11.1+），无需额外 polyfill（旧环境可用
System.import回退，但已废弃）
常见懒加载场景与写法
1. 点击触发组件加载（如模态框、抽屉）
button.addEventListener('click', async () => {
const { default: Modal } = await import('./components/Modal.js');
Modal.show();
});2. 路由级懒加载（SPA 中最典型）
立即学习“Java免费学习笔记（深入）”；
// React Router v6.4+ 示例
const routes = [{
path: '/admin',
element: import('./pages/Users.js')} />
}]
}]; 配合封装的 LazyElement 组件内部用 useState + useEffect + import() 实现挂载时才加载。
3. 滚动进入视口时加载图片或模块（IntersectionObserver 配合）
const observer = new IntersectionObserver(async (entries) => {
entries.forEach(async entry => {
if (entry.isIntersecting) {
const { default: HeavyChart } = await import('./charts/HeavyChart.js');
renderChart(entry.target, HeavyChart);
observer.unobserve(entry.target);
}
});
});
observer.observe(document.querySelector('.chart-placeholder'));
搭配打包工具提升效果
单独写 import() 不够，需结合构建工具才能真正分离代码块：
- Webpack：自动将
import('./xxx')编译为独立 chunk，默认命名如123.chunk.js；可用魔法注释控制名称和预加载：import(/* webpackChunkName: "chart" */ './charts/Bar.js') - Vite：开箱即用，
import()默认生成带哈希的异步 chunk，支持/* @vite-ignore */和预加载指令 - 注意：不要在循环中无节制调用
import()，可能触发大量并发请求；必要时加防抖或队列控制
图片/资源的懒加载补充说明
HTML 原生 IntersectionObserver + fetch 或 new Image() 加载，但和 import() 无关——那是资源加载，不是模块加载。
基本上就这些。懒加载的关键不是“怎么写 import()”，而是“什么时候调、为什么调、是否真需要”。过度拆分反而增加 HTTP 请求和解析开销，合理粒度 + 用户感知明显处（如路由、交互节点）才是重点。
