Rive.wasm blocking website load

Question

Rive.wasm blocking website load

carolinmaisenbacher opened this issue 2 years ago · comments

Carolin Maisenbacher commented 2 years ago

I am currently developing a Gatsby website that uses a few Rive animations with the help of rive-react.

In development it works great, however whenever building my website the loading speeds for the first paint get very slow.

I noticed that a 3rd party request to get rive.wasm is what is blocking my website.
I am attaching some screenshots below.

Do you have any advice how I can make the request faster? Is it possible to host the rive.wasm file e.g. on my own server?

Any help is appreciated!

Here is the request summary, which shows it took 93ms to get the rive file:

These are the request details:

Zachary Plata · Answer 1 · Tue Jun 28 2022 21:46:18 GMT+0800 (China Standard Time)

@carolinmaisenbacher Oh good question! Right now, the WASM gets requested implicitly as you discovered. In the downstream JS/WASM runtime, we have a lower-level API package that lets you build the render loop yourself, and set the WASM file yourself (which seems of interest here) which is a little more involved. We don't bubble that up as a React affordance at the moment, but we can probably find some solution at the lower level to supply the WASM and allow you to do the same in React. You can download the WASM file itself via the URL in that screenshot and save that in your server, however, each new version of @rive-app/canvas will have a new WASM file so you'd just need to be diligent about making sure you use the version associated with the one this repo uses as a dependency.

3lonious · Answer 2 · Fri Jul 01 2022 19:24:42 GMT+0800 (China Standard Time)

im having issues rending on an ec2 for some reason.. it works localy but when i push to developement nothing shows up.. spent the day trying to figure why... since my request looks the same as the screen shot from Carolin. Im wondering if im having the same issue with rending here? cant figure out how to debug at the moment and its sucks cuz i really want to use this anmination and more in my react project

Zachary Plata · Answer 3 · Sat Jul 02 2022 05:08:04 GMT+0800 (China Standard Time)

Actually, you might be able to host the WASM file on your own server and be able to serve this up!

import Rive, { RuntimeLoader } from "@rive-app/react-canvas";

RuntimeLoader.setWasmUrl("http://your-own-server.com/rive.wasm");

function App() {
  return (
    <div>
      <Rive src="https://cdn.rive.app/animations/vehicles.riv" />
    </div>
  );
}

We can work on making the URL you'd like to set as a param you pass into <Rive> or useRive() but you could do this in the meantime, and then it shouldn't try to request the wasm from unpkg by default.

To download the correlated WASM file for your server, check out the dependency version of @rive-app/canvas in the tagged version of @rive-app/react-canvas you're consuming. For example, 1.0.71: https://github.com/rive-app/rive-react/blob/v3.0.15/package.json#L32

The correlated WASM file should be the following URL with the version identified above: