按需动态导入的核心是识别非核心脚本、替换为import()、绑定合理触发时机并兜底错误。非核心脚本指不参与首屏渲染、非主交互路径、用户未必立即使用的模块，如后台子页、弹窗组件、重型图表库、多语言包及第三方SDK；需将静态import移至函数或事件中，用await import()或Promise.all()加载；触发时机包括路由切换、用户点击、视口进入或空闲预加载；必须try/catch捕获异常、配合Suspense/v-if展示加载态，并缓存已加载模块避免重复请求。
将非核心脚本转为按需动态导入，核心是识别“非核心”、替换导入方式、控制触发时机，并确保错误可兜底。这不是简单加个 import() 就完事，而是一套有判断、有节奏、有保障的加载逻辑。
明确哪些脚本属于“非核心”
非核心脚本指那些不参与首屏渲染、不支撑主交互路径、用户进入后未必立刻用到的功能模块。典型包括：
- 后台管理子页面（如“系统日志”“权限配置”）
- 弹窗类组件（如分享面板、反馈表单、帮助浮层）
- 富文本编辑器、图表库（ECharts、Chart.js）等重型依赖，仅在特定编辑页或数据页使用
- 国际化语言包（除默认语言外的 en-US、ja-JP 等）
- 第三方 SDK（如客服聊天插件、埋点上报增强模块），仅在用户点击按钮后才初始化
用 import() 替换静态导入
把原来写在文件顶部的 import 语句，移到真正需要它的地方，并用 import() 函数调用：
- ❌ 原写法（全量打包进主包）：
import Chart from 'echarts' - ✅ 改为动态导入（仅访问图表页时加载）：
const { default: Chart } = await import('echarts') - ✅ 按需引入具体模块（更细粒度）：
const BarSeries = await import('echarts/lib/chart/bar') - 注意：不能在模块顶层用
import()，必须放在函数、事件回调、条件分支中
绑定合理触发时机
动态导入不是“越早越好”，而是“刚好够用”。常见触发方式：
立即学习“Java免费学习笔记（深入）”；
-
路由切换时：配合 React Router 或 Vue Router，在
element或component配置中使用lazy(() => import('./ReportPage')) - 用户交互时：按钮点击、菜单展开、Tab 切换后立即加载对应功能模块
-
可视区进入时：结合
IntersectionObserver，当某个功能区域滚动进入视口再加载（适合长页面中的独立模块） -
空闲时段预加载：用
requestIdleCallback在浏览器空闲时提前拉取低优先级脚本，但不执行
处理加载失败与用户体验
动态导入是网络请求，必须考虑失败场景：
- 用
try/catch或.catch()捕获加载异常，降级为提示文案或禁用相关功能 - 配合
Suspense（React）或v-if+ loading 状态（Vue）展示骨架屏或加载指示器 - 避免重复触发：对已成功加载的模块做缓存（例如存在闭包变量或 WeakMap 中），防止多次点击反复请求
- 慎用
import()在循环中——一次加载多个同构模块时，应合并为单次Promise.all([import(a), import(b)])
本质上，按需动态导入不是技术炫技，而是把“是否加载”的决策权从构建时交还给运行时，让每个字节都在该出现的时候才现身。
