DxOpal用に書いたコードはゲームの規模が大きくなってrequire_remoteの数が増えてくると、逐次同期で読むので起動までに時間がかかるようになってきます(これはこれで解決したい問題なのですが……)
そこで「リリースするゲーム」では一つのjsファイルにまとめてさらに圧縮して少しでも軽くなるようにしました。その方法をメモって置きます。
手順
- DxOpal本体のopal/dxopal.rbのrequire "opal-parser"をコメントアウトする
これをやっておくと本体のサイズがぐっと小さくなります。
(追記・現在require 'dxopal/patches/require_remote'の行もコメントアウトしないと内部でopal-parserが呼ばれているのでサイズが小さくなりません) - 自分が書いたゲームのコードのrequire_remoteをすべてrequireに置き換える
require_remoteのままだと使えないので。 - DxOpalのビルドに自分のコードのパスを通してビルドする
- ビルドされたjsファイルをuglifyjsでコンパクトにする。
uglifyjsがインストールされている必要があります。
面倒くさいのでRakeにしちゃいました
自分のプロジェクト用のオレオレRakeなので環境に合わせてカスタマイズが必要かもしれません。
Rakefile
require 'opal'
require 'rake/clean'
DXOPAL_PATH = '../dxopal'
directory "tmp"
desc "Build main.js"
task :build => ["main.js"]
desc "Build main.js and main.min.js"
task :build_min => "main.min.js"
file "main.min.js" => "main.js" do |t|
sh "uglifyjs #{t.source} -o #{t.name}"
end
CLEAN.include("tmp")
CLOBBER.include("main.js")
CLOBBER.include("main.min.js")
file "main.js" => "tmp" do |t|
FileList["**/*.rb"].each do |filename|
s = open(filename).read
open("tmp/" + filename, "w") do |f|
f << s.gsub("require_remote", "require")
end
end
Opal.append_path(DXOPAL_PATH + "/opal")
Opal.append_path("tmp")
js = Opal::Builder.build("./tmp/main.rb").to_s
File.write(t.name, js)
end
以下のコマンドでビルドされてmain.jsとmain.min.jsができます。
私のプロジェクトの場合、計3MB近くあったファイルが789KBまで小さくなりました。
$rake build_min
おまけ
$rake clean 作業ファイルの削除
$rake clobber 出力ファイルの削除
配置
jsファイルは以下のように配置します。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" />
<title>DxOpal Game</title>
</head>
<body>
<canvas id="dxopal-canvas"></canvas>
<div id="dxopal-errors"></div>
<script type="text/javascript" src="main.min.js?20181209"></script>
</body>
</html>
キャッシュがクリアされるようにmain.min.js?の後にクエリー文字列をつけています。