当非关键重型组件或第三方挂件只在用户交互后才需要时…

页面包含点击、悬停、滚动或输入后才需要的重型组件或第三方资源时，采用交互触发懒加载。

适用场景

解决思路

1. 用动态 import() 在用户交互（click、hover 等）时加载模块，而不是在初始 bundle 中同步加载。
2. 在用户首次点击要与某组件交互时，再加载该组件资源。
3. 当组件滚动进入视口时再加载该组件资源。
4. 用 requestIdleCallback 将非关键组件的加载推迟到浏览器空闲时。
5. 按资源关键程度选择加载方式：eager 立即加载；route-based lazy 在导航到路由/组件时加载；on interaction 在用户点击 UI（如 Show Chat）时加载；in viewport 在滚动接近组件时加载；prefetch 在关键资源之后、需要之前加载；preload 以更高优先级提前加载。
6. 对重型第三方嵌入实现 facade（轻量占位/预览），用图片或截图模拟基本体验，用户点击预览后再动态加载真实资源。
7. 在 hover facade 时对所需 origin 做 preconnect，以降低后续加载延迟。
8. 对第一方代码，在合适时优先用 prefetch，而不是 import-on-interaction。
9. 在 React 中用 React.lazy 配合 Suspense 做组件级 import-on-interaction，并用 fallback 处理加载状态。
10. 在 vanilla JavaScript 中把动态 import() 放进按钮事件监听器，例如点击后 import('lodash.sortby').then((module) => module.default).then(sortInput()).catch((err) => console.log(err))。
11. 在动态 import 不适用或出现之前的场景，用基于 Promise 的 script loader 动态注入脚本，例如点击 #login 时 loader.load(['//apis.google.com/js/client:platform.js?onload=showLoginScreen']) 并处理 then。
12. 在 React 中先用 React.lazy(() => import('./EmojiPicker')) 做代码分割，再用 Suspense fallback 包裹条件渲染的组件。
13. 在 React 中把 EmojiPicker 延迟到点击 emoji 图标时再导入：在 openEmojiPicker 中调用 import(/* webpackChunkName: "emoji-picker" */ './EmojiPicker').then((module) => module.default).then((emojiPicker) => setEmojiPickerEl(createElement(emojiPicker)))，关闭时 setEmojiPickerEl(null)，并用 ErrorBoundary 包裹。
14. 在 Vue 中用 components: { Emojipicker: () => import('./Emojipicker') } 动态导入组件，并用由按钮点击切换的 v-if 控制条件渲染，从而只在交互时加载。
15. 在支持动态组件加载的框架/库（如 Angular）中采用同样的 import-on-interaction 模式。
16. 做渐进式加载：初始只下载最小代码，让页面视觉尽快完整；之后由用户交互决定下载哪些组件代码，使未使用功能的代码不下发。
17. 为避免丢失早期点击，在首段 HTML 中包含小型事件库（如 JSAction），在框架 bootstrap 前跟踪所有点击；用这些事件触发组件代码下载，并在框架 bootstrap 完成后重放用户交互。
18. 使用其他启发式加载组件代码：空闲一段时间后加载；用户鼠标悬停相关 UI/按钮/CTA 时加载；根据浏览器信号（网络速度、Data Saver 模式等）调整加载激进度。
19. 数据加载采用相同思路：初始渲染数据放在 SSR HTML 中并流式传输；延迟数据根据用户交互下载，并与对应组件关联。
20. 在构建期创建组件及其依赖图；运行时引用该图，随时快速获取任意组件所需的代码和数据资源；按组件而不是按路由做 code-split。
21. 认证场景：不要在初始加载时急切加载认证 SDK，而在用户点击 Login 按钮时动态 import 认证库。
22. 聊天挂件：用 CSS/HTML 实现一个快速加载的假 live chat 按钮，点击后再加载 Intercom bundles；也可用 HTML/CSS 假副本替换帮助聊天挂件，点击时加载真实组件。
23. 视频嵌入：用 YouTube Lite Embed 或类似 facade：Custom Element 接收 YouTube Video ID，显示最简缩略图和播放按钮，点击时动态加载完整 YouTube embed；也可显示带假播放按钮的缩略图，点击后打开 modal 并自动播放完整播放器。
24. 滚动回顶部：点击 scroll to top 按钮时再 import('react-scroll')，然后调用 scroll.animateScroll.scrollToTop({})，避免急切加载 react-scroll。
25. 把耗时工作移到用户交互附近时，使用小颗粒 chunk，减少用户点击后等待代码和数据 fetch/execute 的时间。
26. 对可能在慢网络下加载慢的大依赖，拆分其加载，或在页面关键内容加载完成后 prefetch；测量实际影响以判断收益。
27. 若 facade 导致交互前缺少关键功能（例如视频自动播放），考虑改为在第三方 iframe 滚动进入视口时懒加载，而不是延迟到交互。
28. 对初始视口内必须立即显示的嵌入内容，如果嵌入会引入 2-3MB JavaScript，可完全替换为外观相似的静态变体，并链接到可交互版本；在构建时拉取嵌入数据并转换为静态 HTML。
29. 总体上避免在 document head 中使用同步第三方脚本，并在第一方 JS 加载完成后再加载非阻塞第三方脚本。

适用边界 · 注意事项

• 资源在页面加载时立即需要且不受用户交互控制时不用。
• 交互后加载延迟会造成明显差体验时不用，考虑 prefetch/preload。
• 小型模块的动态 import 开销超过延迟加载节省时不用。