javascript如何实现懒加载_如何动态导入

懒加载与动态导入本质是按需加载技术，核心为动态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: <AdminLayout />,
  children: [{
    index: true,
    element: <Dashboard />
  }, {
    path: 'users',
    element: <LazyElement loader={() => import('./pages/Users.js')} />
  }]
}];

登录后复制

配合封装的 LazyElement 组件内部用 useState + useEffect + import() 实现挂载时才加载。

标签： react javascript java html js vite 浏览器 工具 懒加载 safari ai 路由 内