如何实现类似PayPal的Runtime动态打包JavaScript SDK

需求背景 #

我们需要交付一款Web SDK，用户需通过script标签传入client-id加载，示例如下：

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

核心要求是根据client-id仅打包该客户已启用的功能模块——如果不做筛选，不仅会导致JS文件体积冗余，还会暴露部分用户无权访问的服务（虽然后端会拦截未授权请求）。PayPal的SDK正是采用这种动态打包方案，其官网说明翻译如下：

仅从PayPal服务器加载JavaScript SDK
请仅从PayPal官方服务器加载JavaScript SDK，原因包括：
该脚本会根据您的client-id和当前买家信息动态打包，仅包含所需的特定代码、图片、本地化及其他资源，不会用冗余代码拖慢页面加载速度。这种方案无法通过静态分发的脚本实现。

实现方案思路 #

• 服务端路由接收请求：搭建HTTP服务，监听SDK加载请求（如/sdk/js?client-id=XXX），解析URL中的client-id参数。
• 获取客户启用模块：通过client-id查询后端配置服务，拿到该客户已开通的功能模块列表（比如支付方式、本地化支持等）。
• 实时动态打包：用ESBuild、Rollup这类高性能工具在服务端实时打包：
  • 以SDK核心代码为入口
  • 仅引入客户启用的模块
  • 按需打包关联资源（如图片、本地化文案）
  • 自动压缩混淆最终代码
• 缓存优化：根据client-id和模块配置生成唯一缓存Key，将打包后的JS缓存到内存或CDN，相同请求直接返回缓存内容，避免重复打包。
• 响应返回：把动态打包好的JS文件作为响应返回，同时设置合理的Cache-Control等缓存头，提升后续加载效率。

关键注意事项 #

• 性能优先：选择ESBuild这类极快的打包工具，减少服务端打包耗时，避免请求阻塞。
• 版本控制：可在URL中加入版本参数（如?v=1.0.0），方便缓存更新和版本迭代。
• 错误处理：当client-id无效或模块查询失败时，返回基础核心SDK并给出友好提示，避免页面崩溃。
• 安全防护：校验client-id合法性，防止恶意请求触发大量打包操作，耗尽服务端资源。

内容的提问来源于stack exchange，提问作者Devaraj Kommineni