ruffle 中文文档 下载 App

自托管 Ruffle JS 包:版本可控的离线部署

什么时候选自托管

下载官方自托管包

去 GitHub Releases 的 Assets 里找文件名叫 ruffle-x.x.x-web-selfhosted.zip 或 ruffle-nightly-web-selfhosted.zip 的那个。解压后里面会有这些文件:

放到服务器上

建议统一放一个子目录(比如 /js/ruffle/),保持目录结构不变——因为 ruffle.js 里引用了同目录下的 ruffle.wasm 和 ruffle_wasm.js,你挪了位置就要改源码。

放完之后页面引入的 <script> 变成:

<script src="/js/ruffle/ruffle.js"></script>

比 CDN 就多了一层路径。

CSP 适配

如果你的网站启用了严格的 Content-Security-Policy(比如 script-src 'self'),你需要把 Ruffle 相关的源加进去:

Content-Security-Policy:
  script-src 'self' https://unpkg.com;
  default-src 'self';
  frame-src 'self' https://unpkg.com;
  worker-src 'self' blob:;

关键:Ruffle 内部用 WebAssembly,现代浏览器需要 worker-src blob: 或 'wasm-unsafe-eval' 来允许 WASM 编译。2023 年以后的 Chrome / Edge / Firefox 都支持 'wasm-unsafe-eval' 这个 CSP 关键字,更安全。

gzip / brotli 压缩

ruffle.wasm 本身比较大。你的服务器如果没开 gzip / brotli 压缩,用户下载会很慢。Nginx 开一下:

gzip on;
gzip_types application/wasm application/javascript;

Apache 开一下 mod_deflate,Cloudflare / CDN 自动开,不用管。

升级自托管版本

每次想升级:

  1. 下载新版本的 selfhosted zip
  2. 整个目录替换——不要手动覆盖单个文件
  3. 刷新测试页面,看 Console 有没有红色报错
  4. 如果网站用了长期缓存,清一下边缘缓存(或加版本号到路径比如 /js/ruffle/v0.7.1/)

想进一步裁剪构建

Ruffle 的 Web 构建比较通用,如果你只需要 AVM 1 支持、不要 AVM 2,可以从源码编译出一个更小的 WASM 包。需要 Rust 工具链、wasm-pack、以及对 crates.io 的基本了解——这种深度定制一般只有大型 Flash 归档站会做,普通站长用官方 selfhosted 包就够了。