javascript如何实现懒加载_如何动态导入-js教程-PHP中文网

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

夢幻星辰

发布： 2025-12-17 22:35:02

原创

850人浏览过

懒加载与动态导入本质是按需加载技术，核心为动态import()语法，支持运行时调用、变量路径和构建工具代码分割，用于路由、交互、视口等场景，需结合实际性能权衡使用。

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

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() 实现挂载时才加载。

html5动态显示媒体视频播放器代码

html5动态显示媒体视频播放器代码,这个我们在企业网站或者教学网站会用到，教学网站，有一些视频要播放，那么就会用到播放器，可以参考源码，看看播放器的效果是如何实现的，php中文网推荐下载！

101

查看详情

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);
    }
  });
});
<p>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 原生 <img loading="lazy" alt="javascript如何实现懒加载_如何动态导入" > 是浏览器级图片懒加载，不涉及 JS；若需 JS 控制（如自定义占位、错误重试、WebP 切换），可结合 IntersectionObserver + fetch 或 new Image() 加载，但和 import() 无关——那是资源加载，不是模块加载。

基本上就这些。懒加载的关键不是“怎么写 import()”，而是“什么时候调、为什么调、是否真需要”。过度拆分反而增加 HTTP 请求和解析开销，合理粒度 + 用户感知明显处（如路由、交互节点）才是重点。

以上就是javascript如何实现懒加载_如何动态导入的详细内容，更多请关注php中文网其它相关文章！