一文讲明白前端项目中的各种懒加载（不止路由和图片）

在前端性能优化中，懒加载几乎是必考概念。但很多人一提懒加载，只能说出两句话：

路由懒加载用 import()图片懒加载用 IntersectionObserver

这在真实项目和面试中，远远不够。

这篇文章从加载对象、作用层级、真实业务动机三个维度，系统讲清楚——前端里到底有哪些懒加载，以及它们各自解决什么问题。

什么是懒加载？

一句话定义：

懒加载 = 把“现在不需要的东西”，从初始化阶段推迟到真正需要时再加载。

本质目标只有三个

1. 减少首屏资源体积
2. 降低初始化 JS 执行压力
3. 提升关键性能指标（FCP / LCP / TTI）

前端懒加载的完整分类总览

可以按 懒什么 来分类：

下面逐类拆开讲。

路由级懒加载（最基础，但远没那么简单）

做的是什么？

页面组件按路由拆包，只有访问该路由时才下载对应 JS。

实现方式（Vue / React 类似）

const UserPage = () => import('@/views/user/index.vue')

解决的问题

• SPA 初始 bundle 过大
• 首屏 JS 下载 & 执行时间过长
• 低端设备白屏时间长

常见误区

❌ “只要用了路由懒加载，首屏一定快”

实际上：

• 首页路由本身仍然是首包
• 首页引入的大组件 / 工具库仍可能很重

路由懒加载是“必要条件”，不是充分条件

组件级懒加载（真实项目的关键）

路由拆完以后，首屏依然慢，通常问题在这里。

场景举例

• 弹窗（Modal / Drawer）
• 图表（ECharts）
• 富文本编辑器
• 地图组件

这些组件 不是首屏必需，但很多项目却一开始就加载。

实现方式（Vue）

const ChartPanel = defineAsyncComponent(() =>
  import('./ChartPanel.vue')
                                       )

实战价值

• 明显减少首屏 JS 执行量
• 把“重组件”的成本推迟到用户真实操作

面试加分点

路由解决的是“页面粒度”，组件懒加载解决的是“页面内部结构不合理”的问题。

资源懒加载（图片 / 视频 / iframe）

这是内容型页面（信息流 / 社区 / 文档）必做优化。

1️⃣ 图片懒加载

核心思想

图片进入视口前不加载。

主流方案

const observer = new IntersectionObserver(...)

解决的问题

• 首屏请求图片过多
• 网络带宽被无关图片占满
• 滚动时卡顿

进阶优化

• placeholder + blur
• 响应式图片（srcset）
• 首屏关键图不懒加载（LCP 优化）

2️⃣ iframe / video 懒加载

常见场景：

• 视频播放器
• 地图
• 第三方页面嵌入

本质与图片一致，但收益更大，因为它们更重。

数据懒加载（不是所有数据都该首屏拿）

常见业务场景

• Tab 切换
• 折叠面板
• 分步骤表单
• 长列表分页 / 无限滚动

错误做法

❌ 页面一加载，把所有 Tab 的数据全请求

正确策略

• 默认只请求当前可见区域的数据
• 用户触发（切换 / 滚动）再请求

本质

不是“接口慢”，而是“请求时机不合理”

JS 逻辑懒加载

很多项目 JS 慢，不是包大，而是初始化执行太多逻辑。

常见可懒的逻辑

• 大数据计算
• markdown / diff / 高亮解析
• AI prompt 预处理
• 复杂校验规则

技术手段

• import() 动态加载逻辑模块
• Web Worker 推迟并行执行
• 用户触发后再初始化

典型收益

• 降低主线程阻塞
• 提升 TTI（可交互时间）

第三方脚本懒加载

常见第三方脚本

• 数据埋点
• 客服 SDK
• 地图
• 登录 / 分享 SDK

问题

第三方脚本：

• 体积不可控
• 执行逻辑不透明
• 容易拖慢主线程

常见策略

• async / defer
• 首次交互后加载
• 路由进入后加载
• 用户点击触发初始化

核心不是“用不用第三方”，而是“能不能控制它的加载时机”。

懒加载的原则

❌ 错误理解

懒加载越多越好

✅ 正确原则

1. 首屏必需的不懒
2. 用户大概率用到的适度预加载
3. 重资源 + 非关键路径 = 懒加载

常见平衡策略

• 懒加载 + 预加载
• hover / idle 时预取
• 网络环境感知（弱网更激进）

前端懒加载本质是对资源加载时机的重新编排，不只是路由和图片，而是覆盖页面、组件、资源、数据、逻辑和第三方脚本。真正成熟的项目，一定是按用户行为路径设计懒加载策略，而不是机械拆包。