Canvas vs WebGL
在 Web 端，建议先在这两个包中二选一：
它们共享相同的高级 API，因此切换包时通常不需要改 new Rive({...}) 的使用方式。主要差异在于渲染后端与包体积。你也可以参考运行时体积对比：Runtime Sizes。
@rive-app/webgl2（推荐）
如果你希望在多数场景下获得更好的渲染质量与性能，优先使用 @rive-app/webgl2。
npm install @rive-app/webgl2
- 使用 Rive Renderer，通常有更好的渲染性能
- 支持仅 Rive Renderer 提供的能力（例如向量羽化）
WebGL 在浏览器中存在并发上下文数量限制。当同页有很多
new Rive({...})实例时，建议为每个实例设置useOffscreenRenderer: true，以共享离屏 WebGL 上下文，提高稳定性。
在 Chrome 中启用草案扩展
WEBGL_shader_pixel_local_storage可进一步提升性能；若未启用，Rive 会回退到基于 MSAA 的 WebGL2 路径。
@rive-app/canvas
如果你的图形复杂度较低，同时更看重较小体积，可选 @rive-app/canvas。
npm install @rive-app/canvas
- 使用浏览器原生 CanvasRenderingContext2D
- 包体积通常小于 WebGL 渲染方案
- 适合较简单的矢量/光栅图形
进阶包变体
在选择 @rive-app/webgl2 或 @rive-app/canvas 后，还可以根据打包诉求选择以下变体。
*-lite 变体
部分运行时提供 -lite 版本，进一步减小体积。
- 示例：
@rive-app/canvas-lite - 适合强烈追求最小运行时体积的场景
-lite会移除部分能力（例如 text、layout、audio、scripting 引擎）
*-single 变体
部分运行时提供 -single 版本，会把 rive.wasm 直接打进 JS 文件。
- 示例：
@rive-app/canvas-single - 适合希望避免额外 WASM 网络请求的场景
- 代价是 JS 体积更大
- ⚠️ 非
single版本由于 WASM 独立请求，跨页面缓存通常更有优势
已弃用包
@rive-app/webgl 已弃用，优先使用 @rive-app/webgl2。