懒加载
前端中按需加载资源或代码，以推迟非关键内容加载时机的常见策略。
#tech / dev / frontend
#type / concept
#status / growing
[!info] related notes
懒加载
懒加载的核心不是“晚一点加载一切”，而是把非关键资源推迟到真正需要时再加载。
一句话定义
懒加载就是按需加载：当前不影响首屏或当前交互的资源，先不急着下载和执行。
常见场景
- 路由组件按需加载
- 首屏外图片延迟加载
- 大型图表、编辑器、地图等重型模块延迟引入
- 滚动到可见区域时再加载内容
它解决什么问题
- 减少首屏资源体积
- 缩短首屏可交互时间
- 避免用户根本不会访问的代码被提前下载
常见实现方式
代码懒加载
const Page = () => import('./Page')图片懒加载
- 原生
loading="lazy" IntersectionObserver
常见误区
- 以为写了动态导入，所有相关业务代码都会自动延后
- 关键初始化逻辑仍然在首屏同步执行，导致“形式上懒加载，实际上没变轻”
- 把本该预加载的关键资源也过度延后，反而影响体验
最短记忆方式
懒加载不是不加载，而是晚到真正需要时再加载。
面试要点
来自 lazy-loading-interview-question 的面试视角整理。
一句话回答
懒加载就是把当前不急着用的代码或资源推迟到真正需要时再加载，以减少首屏压力和无效下载。
最稳的回答主线
- 路由和组件可以按需加载
- 图片可以进入可视区再加载
- 大型模块可以延后引入
- 本质是在“首屏速度”和“后续加载时机”之间做更合理分配
最短记忆方式
先把关键内容跑起来，非关键内容晚点再来。