资源按需加载策略：让网页快得像翻书一样

打开一个电商页面，商品图、评论区、推荐栏、视频介绍全堆在首页加载——结果用户只看了前两屏就划走了，后面几十个JS、上百张图片却早早就占着带宽和内存。这不是优化，是浪费。

什么是资源按需加载？

简单说，就是“用到再加载”。轮播图组件不在首屏？先不载；用户点开“商品详情”才去拉接口；长列表滚动到第15项，第16项的图片才开始下载。资源不提前打包塞满整个页面，而是跟着用户动作节奏走。

几种常用落地方式

1. 图片懒加载（Lazy Load）
给 <img> 加上 loading="lazy"，浏览器原生支持，兼容性已覆盖主流版本：

<img src="placeholder.jpg" data-src="real-product.jpg" loading="lazy" alt="新款耳机">

配合 Intersection Observer 还能自定义触发时机，比如提前 200px 就开始预加载。

2. 路由级代码分割（React/Vue 场景）
用户点“我的订单”，才加载订单模块的 JS 和样式，而不是一进来就把全部路由代码打包进 main.js：

// Vue Router 示例
const routes = [
  { path: '/home', component: () => import('./views/Home.vue') },
  { path: '/order', component: () => import('./views/Order.vue') }
]

3. 动态 import + 条件触发
点击“展开更多评论”时，才加载评论分页组件：

button.addEventListener('click', async () => {
  const { CommentList } = await import('./components/CommentList.js');
  render(CommentList);
});

别踩这些坑

• 不是所有资源都适合懒加载：首屏关键 CSS、字体文件、核心交互逻辑，该早加载就得早加载；
• 懒加载图片没设 placeholder 或宽高，会导致页面抖动；
• 第三方 SDK（比如统计脚本、客服浮窗）直接写在 HTML 里，又大又阻塞，其实完全可以等用户停留 3 秒后再动态注入。

某次我们帮一家本地生活平台做优化，把地图组件、预约表单、评价弹窗全改成按需加载后，首屏时间从 3.8s 降到 1.2s，跳出率下降了 27%。用户没觉得少了什么，只是感觉“点哪哪就出来”，很顺。