WebGPU Samples 项目中的代码示例加载优化探讨

WebGPU Samples 项目是一个展示 WebGPU 图形编程技术的示例库，近期开发团队针对代码示例的加载方式进行了讨论和优化。

背景与问题

在项目当前实现中，代码示例通过 React 单页应用(SPA)的形式加载，这种方式带来了一些开发体验上的不便：

1. 示例代码中需要包含特定逻辑（如 if (!pageState.active) return;）来确保在 SPA 中正确加载
2. 代码可读性受到影响，开发者难以直接理解核心示例逻辑
3. 示例与框架耦合度高，不利于单独测试和复用

解决方案讨论

开发团队提出了将每个示例作为独立页面加载到 iframe 中的方案，这种设计具有以下优势：

1. 隔离性：每个示例运行在独立的沙盒环境中，避免相互干扰
2. 简化代码：去除与框架交互的特殊逻辑，使示例代码更专注于 WebGPU 功能展示
3. 开发友好：开发者可以直接查看和修改单个示例，无需考虑整个应用上下文

技术实现考量

在实施过程中，团队面临几个技术决策点：

1. 构建方式：由于大多数示例使用 TypeScript 编写，需要考虑构建流程

   • 保持 TypeScript 编写的便利性
   • 同时提供纯 JavaScript 版本供直接参考

2. 框架解耦：去除 React 特定代码，使示例更独立

   • 但保留必要的工具函数和辅助代码
   • 确保示例仍然易于维护和更新

3. 构建系统：为每个示例创建独立的构建配置会增加复杂度

   • 需要权衡构建系统复杂度和示例独立性
   • 考虑类似 three.js 示例浏览器的实现方式

最终方案与效果

经过团队讨论和实现，最终达成了以下改进：

1. 移除了示例中与 React SPA 交互的特殊逻辑
2. 保留了 makeSample 等核心工具函数
3. 提高了代码的清晰度和可维护性

这一改进使得 WebGPU Samples 项目中的示例代码更加干净、专注，便于开发者学习和参考，同时也为未来可能的 iframe 加载方式奠定了基础。对于 WebGPU 初学者来说，这种改进使得核心图形编程概念更加突出，减少了框架相关代码的干扰。