动态导入（import()）仅支持esm格式库，对jquery等umd库需用script标签动态加载或externals配置cdn注入，并辅以超时控制、错误降级与promise缓存。
动态导入（import()）本身不能直接加载非模块化、非 ESM 格式的第三方大型库（如 jQuery、Lodash 全量版、Moment.js 等），但可以配合构建工具和加载策略，实现“按需触发 + 模块化接入”的效果。关键不是让 import() 去兼容任意脚本，而是让目标库以可被动态导入的方式存在。
确保目标库支持 ESM 加载
只有导出为标准 ES 模块（ESM）的库，才能被 import() 正确解析并返回命名空间对象。常见情况：
- 现代 CDN（如 esm.sh、cdn.skypack.dev、unpkg.com?module）提供 ESM 版本：
import _ from 'https://esm.sh/lodash-es@4.17.21'; - 部分库已发布
lodash-es、date-fns、zod等原生 ESM 包，可直接import()； - 传统 UMD/IIFE 库（如
jquery@3.6.0）不支持直接import()，会报错Cannot resolve module或not a module。
对非 ESM 库，用 script 标签 + 动态注册兜底
当必须加载 jQuery、Chart.js（旧版）、Three.js（UMD 构建）等时，import() 失效，应改用手动 document.createElement('script') 并监听加载完成：
- 创建 script 标签，设置
src和crossorigin（CDN 跨域必需）； - 用
Promise封装加载过程，避免重复插入； - 加载后从全局变量（如
window.jQuery）提取接口，返回统一模块结构； - 示例：
const $ = await loadScript('https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js').then(() => window.jQuery);
构建期剥离 + HTML 注入（推荐用于生产环境）
对 Vue/React/Vite 项目，更稳定的做法是把大型依赖设为 externals，不打包进 chunk，由 HTML 注入 CDN 脚本：
- Vite 中配置
build.rollupOptions.external和externals； - 在
index.html中用<script></script>引入对应 CDN 地址（可基于环境变量切换）； - 组件内仍写
import { debounce } from 'lodash-es'，但实际不打包，运行时从 CDN 提供的模块中解析； - 优势：体积可控、CDN 缓存复用、降级灵活（如失败后 fallback 到本地副本）。
结合错误处理与加载状态管理
动态加载大型库耗时长、失败率高，必须主动应对：
- 加超时控制（如 8 秒未响应 reject）；
- 捕获网络错误、CORS 拒绝、语法解析失败；
- 显示 loading UI（如骨架屏、进度提示）；
- 提供备用路径（如 CDN 失败时加载本地 minified 版本）；
- 避免同一库多次并发加载——用 Map 缓存 Promise 实例。
