在 Webpack 中，按需加载（Lazy Loading） 和 预加载（Preloading） 是两种不同的优化策略，它们的目标和使用场景有所不同。以下是它们的区别和具体应用：

---

一、概念

1、按需加载（Lazy Loading）

按需加载的核心思想是 推迟加载，不需要的时候不加载，需要的时候再触发加载，这种方式可以减少初始加载时间，提升应用的性能。

主要使用场景： 前端框架路由组件的懒加载、大型组件或模块的延迟加载、图片视频等静态资源的延迟加载。

2、预加载（Preloading）

预加载的核心思想是 优先加载关键资源，以便在需要时能够快速使用。这种方式可以提升用户体验，减少等待时间。

主要使用场景： 关键资源（如图片、字体等）、核心结构需要的 CSS 文件等。

3、预取（Prefetching）

预取是预加载的一种特殊形式，它的核心思想是 在浏览器空闲时加载资源，以便在未来可能需要时使用。

主要使用场景： 预取用户可能访问的页面或功能模块。预取非关键资源（如非首屏的图片、脚本等）。

二、对比

特性	按需加载（Lazy Loading）	预加载（Preloading）	预取（Prefetching）
加载时机	需要时加载	提前加载	浏览器空闲时加载
优先级	高	高	低
使用场景	延迟加载非关键资源	提前加载即将使用的资源	预取未来可能使用的资源
实现方式	import()	import(/* webpackPreload: true */)	import(/* webpackPrefetch: true */)
对性能的影响	减少初始加载时间	提升用户体验，减少等待时间	优化未来访问的性能，优化即将可能发生的交互体验

三、代码示例

1、按需加载

// 用户点击按钮时加载模块
button.addEventListener("click", () => {
  import("./Module").then((module) => {
    module.default();
  });
});

2、预加载

// 提前加载模块，以便快速使用
import(/* webpackPreload: true */ "./NextPage");

3、预读取

// 在浏览器空闲时加载模块，以备未来使用
import(/* webpackPrefetch: true */ "./FutureModule");

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24