跳到主要内容
中文系列课

预加载 WASM

Rive 基于 WASM 的运行时需要加载 Web Assembly 文件。预加载 WASM 可以显著提升性能。

如果你使用 @rive-app/react-canvas 或 @rive-app/react-webgl2，在你的应用中导入 WASM 资源以及 RuntimeLoader API：

import riveWASMResource from '@rive-app/canvas/rive.wasm';
import { useRive, RuntimeLoader } from '@rive-app/react-canvas';

RuntimeLoader.setWasmUrl(riveWASMResource);

const MyComponent = () => {
  const { rive, RiveComponent } = useRive({
    src: 'foo.riv',
    ...
  });
};

RuntimeLoader 是一个单例，在加载 Rive 实例时负责在后台加载 WASM 文件。通过调用 setWasmUrl API，你可以使用从 WASM 文件直接导入的 data URI 来加载 Rive 运行时的 WASM。在任何有 Rive 动画的页面上运行此 API。

你可能需要在构建工具中添加配置以导入 WASM 文件。请参见原始博客文章，该文章启发了我们将这些内容添加到文档中。

你还可以预加载 WASM 模块，如果你设置构建工具在创建 Rive 实例的相关页面中加载 Web Assembly，则可以快速实例化 Rive 动画。

例如，使用 Next.js，你可以在主页面布局中添加以下内容：

import { Html, Head } from "next/document";
import riveWASMResource from '@rive-app/canvas/rive.wasm';

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="preload" href={riveWASMResource} as="fetch" crossOrigin="anonymous" />
      </Head>
    </Html>
  );
}

你可能需要安装与 React 版本相关的 @rive-app/canvas 版本，否则可能会在运行时遇到问题。例如，@rive-app/[email protected] 绑定了 JS 依赖 @rive-app/[email protected]；因此你可能需要安装该特定版本的 JS 运行时以确保兼容性。