【前端】懒加载（组件/路由/图片等）+预加载 汇总
目录
- 懒加载
- 组件
- 路由
- 图片
- 其他场景
- 预加载
按需加载=懒加载+预加载
懒加载
组件
组件频繁使用时不建议懒加载，只懒加载低频组件！
- vue
defineAsyncComponent+suspense【vue2不支持】+ #default/fallback
#default 插槽：渲染真正的内容（比如异步组件）
#fallback 插槽：在内容加载期间显示的占位内容（比如 loading 文案或动画）
<Suspense><template #default><MyComponent /></template><template #fallback>Loading...</template>
</Suspense>// 异步组件（默认内置 Suspense 支持）搭配 <Suspense> 使用
const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'))
- React
React.lazy 和 Suspense
const MyComponent = React.lazy(() => import('./MyComponent'))<Suspense fallback={<div>Loading...</div>}><MyComponent />
</Suspense>
路由
//vue
// Vue Router 中使用动态 import 实现懒加载
const routes = [{path: '/about',component: () => import('./views/About.vue')}
]//react routerv6+
const About = React.lazy(() => import('./pages/About'))
//注意：每个使用 React.lazy()的路由组件都要手动包一层 <Suspense>。
<Route path="/about" element={<Suspense fallback={<div>Loading...</div>}><About /></Suspense>
} />
图片
- HTML 原生方式（推荐，所有框架都通用）
<img src="image.jpg" loading="lazy" alt="示例图">
- vue/react
//vue
//插件 vue-lazyload
// main.ts
import VueLazyLoad from 'vue3-lazyload'
app.use(VueLazyLoad)
// 使用
<img v-lazy="imageUrl" />//react
//1. 原生 loading="lazy"
//2. IntersectionObserver 手写懒加载（更高级）暂略
其他场景
| 类型 | Vue | React |
|---|---|---|
| 第三方组件 | defineAsyncComponent() | React.lazy() |
| Markdown/Code 高亮插件 | 异步加载 PrismJS 等库 | 同上 |
| 地图库（如高德） | <script async> 动态加载 SDK | useEffect + createElement('script') |
| iframe/视频等 | 设置 loading="lazy" + 原生IntersectionObserver | loading="lazy"/preload="none" // 不预加载视频 /第三方库 react-intersection-observer /原生IntersectionObserver |
- IntersectionObserver
原生 IntersectionObserver 是 JavaScript 原生浏览器 API，不属于 React、Vue、jQuery 等框架，vue/react都没有自带或者封装它。用来监听某个元素是否进入或离开视口（或另一个指定元素），常用于：
懒加载图片、视频、iframe
无限滚动
进入视口时动画播放
页面曝光率埋点
⚠️注意
不能监听 display: none 的元素
滚动容器若是自定义元素，需要设置 overflow: auto/scroll
IE11 不支持，需要用 IntersectionObserver polyfill
const target = document.querySelector('#myElement');
/*
第一个参数是回调函数，每当被观察的元素进入或离开视口时触发。
entries: 是一个数组，包含每个被观察元素的状态（IntersectionObserverEntry）。
observer: 当前的 IntersectionObserver 实例本身。第二个参数配置
root: 观察区域。null 表示是浏览器视口（viewport）。
threshold: 触发比例阈值，取值 0 ~ 1。0.1 表示当目标元素有 10% 可见时就触发回调。
*/
const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {//元素已经进入观察区域（例如视口）console.log('元素进入视口');observer.unobserve(entry.target); // 一次性监听//观察器停止监听这个目标}});
}, {root: null, // 默认为视口threshold: 0.1, // 元素进入视口 10% 就触发
});observer.observe(target);//开始观察一个 DOM 元素 target，只要它进入视口就会执行前面的回调。//多个元素
// 选中所有需要懒加载的图片
const images = document.querySelectorAll('.lazy');
// 遍历每个元素，添加观察
images.forEach(img => observer.observe(img));
预加载
- 应用场景
| 场景 | 推荐方式 |
|---|---|
| 当前页面关键 JS/CSS/font | <link rel="preload"> 或 webpackPreload |
| 下个页面可能需要的组件 | webpackPrefetch / 动态 import() |
| 静态图片 | <link preload> 或 JS 创建 Image |
| 提前连接 CDN 或后端 API 域名 | dns-prefetch / preconnect |
| 用户 hover/点击前加载 | 手动 import()/fetch() |
- html文件
| 类型 | 技术/方式 | 说明 |
|---|---|---|
| HTML 资源级别 | <link rel="preload"> | 提前加载关键资源，支持 js/css/font/image/video 等。 |
<link rel="prefetch"> | 低优先级加载未来可能用到的资源（如下一页）。 | |
<link rel="dns-prefetch"> | 提前进行 DNS 查询，加快第三方资源访问。 | |
<link rel="preconnect"> | 提前进行 TCP + TLS 握手。 | |
<link rel="prerender"> | 预渲染整个页面（较少使用，Chrome 支持有限）。 |
- JS文件
安装Webpack 的“魔法注释”写法，用于控制异步模块的加载优先级
这类注释只在 Webpack 构建时生效，属于 Webpack 的“魔法注释”
生成的 HTML 中会自动插入<link rel="preload"> 或 <link rel="prefetch">标签
import(/* webpackPrefetch: true */ './HeavyComponent');
import(/* webpackPreload: true */ './CriticalComponent');
webpackPrefetch: 低优先级预加载，浏览器空闲时加载（推荐用于未来页面组件）
webpackPreload: 高优先级并行加载，立即加载（推荐用于当前页面关键模块）
- vue/react懒加载+预加载组合，使加载更聪明
const Page = () => import(/* webpackPrefetch: true */ './Page.vue');const LazyPage = React.lazy(() => import(/* webpackPrefetch: true */ './Page'));// 可搭配使用：使用 prefetch 手动提前加载，否则空闲才加载
import('./Page');
- 图片
<link rel="preload" as="image" href="/images/banner.jpg">
const img = new Image();
img.src = '/images/banner.jpg';
- 组件：vue/react也是通过提前触发 import() 方式实现（参考上方 webpackPrefetch），也可以组合搭配上懒加载
- 视频
<video preload="auto" src="video.mp4" />
<!--
none 不预加载任何数据
metadata 只加载元数据
auto 浏览器自己决定（尽量预加载）
-->
- 路由也是用路由预加载确实可以通过 Webpack 的魔法注释来实现搭配懒加载
- 字体 也是
<link rel="preload" as="font" href="font.woff2" type="font/woff2" crossorigin="anonymous"> - 页面可见性触发
结合 IntersectionObserver，提前加载资源
const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {fetch('/api/data.json'); // 或 import()observer.unobserve(entry.target);}});
});
observer.observe(document.querySelector('#future-content'));