自托管 Ruffle JS 包:版本可控的离线部署
什么时候选自托管
- 不想依赖 unpkg / jsDelivr 这种第三方 CDN(怕挂、怕限速、怕地区访问慢)
- 内网 / 离线环境(公司内网、校园网、开发环境)
- 要严格控制版本锁定、配合 CSP 头、或需要自定义构建
- 网站有内容安全策略(CSP)不允许从外部域名加载脚本
下载官方自托管包
去 GitHub Releases 的 Assets 里找文件名叫 ruffle-x.x.x-web-selfhosted.zip 或 ruffle-nightly-web-selfhosted.zip 的那个。解压后里面会有这些文件:
ruffle.js— 主脚本(~几十 KB)ruffle_wasm.js— WASM 胶水代码ruffle.wasm— WebAssembly 运行时本体(几百 KB ~ 几 MB)player.html— 调试辅助 HTML(可选)
放到服务器上
建议统一放一个子目录(比如 /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 自动开,不用管。
升级自托管版本
每次想升级:
- 下载新版本的 selfhosted zip
- 整个目录替换——不要手动覆盖单个文件
- 刷新测试页面,看 Console 有没有红色报错
- 如果网站用了长期缓存,清一下边缘缓存(或加版本号到路径比如
/js/ruffle/v0.7.1/)
想进一步裁剪构建
Ruffle 的 Web 构建比较通用,如果你只需要 AVM 1 支持、不要 AVM 2,可以从源码编译出一个更小的 WASM 包。需要 Rust 工具链、wasm-pack、以及对 crates.io 的基本了解——这种深度定制一般只有大型 Flash 归档站会做,普通站长用官方 selfhosted 包就够了。