async/await 加载插件的核心是利用动态 import() 返回 promise,在 async 函数中 await 加载,支持按需、并行(promise.all)或串行(链式 await)加载,配合超时控制、类型校验、生命周期管理(init/destroy)和统一注册,实现解耦与健壮性。

用 async/await 加载插件,核心是把插件模块当作动态导入(import())来处理,让加载过程自然融入 Promise 流程,避免回调嵌套,也方便错误处理和顺序控制。
动态导入插件模块
ES 模块支持顶层 import() 语法,它返回一个 Promise,可在 async 函数中用 await 等待加载完成。插件路径可以是字符串变量,便于按需构造:
- 确保插件文件导出默认对象(如
export default { init, destroy })或命名导出 - 路径需符合模块解析规则,例如
./plugins/chart.js或通过变量拼接的合法路径 - 不能直接
await import(pluginPath)在非 async 函数里,会报语法错误
封装可复用的加载函数
把加载逻辑抽成函数,支持传入路径、超时控制和类型校验,提升健壮性:
- 用
Promice.race()包一层超时逻辑,防止网络卡住阻塞后续流程 - 加载后检查导出是否包含必要方法(如
init),缺失时主动 reject - 返回插件实例而非模块本身,便于统一管理生命周期
按需加载与并行/串行控制
多个插件可并行加载(Promise.all),也可按依赖关系串行加载(链式 await):
- 无依赖插件:用
await Promise.all(plugins.map(loadPlugin))同时发起请求 - 有初始化顺序要求:逐个
await loadPlugin(path),再调用其init() - 加载失败时,
try/catch可捕获具体插件路径和错误,不影响其他插件加载
结合插件注册与生命周期管理
加载成功后,把插件实例存入 Map 或数组,并提供统一的 start() / stop() 接口:
- 每个插件导出的
init()方法可接收配置或上下文,完成内部初始化 - 卸载时调用
destroy()清理事件监听、定时器等副作用 - 主程序不硬编码插件名,只通过约定接口与插件交互,实现解耦











