2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Opal (Ruby-to-JavaScript compiler)Advent Calendar 2018

Day 12

DxOpalのゲームをコンパクトにして公開する方法

Posted at

DxOpal用に書いたコードはゲームの規模が大きくなってrequire_remoteの数が増えてくると、逐次同期で読むので起動までに時間がかかるようになってきます(これはこれで解決したい問題なのですが……)
そこで「リリースするゲーム」では一つのjsファイルにまとめてさらに圧縮して少しでも軽くなるようにしました。その方法をメモって置きます。

手順

  1. DxOpal本体のopal/dxopal.rbのrequire "opal-parser"をコメントアウトする
    これをやっておくと本体のサイズがぐっと小さくなります。
    (追記・現在require 'dxopal/patches/require_remote'の行もコメントアウトしないと内部でopal-parserが呼ばれているのでサイズが小さくなりません)
  2. 自分が書いたゲームのコードのrequire_remoteをすべてrequireに置き換える
    require_remoteのままだと使えないので。
  3. DxOpalのビルドに自分のコードのパスを通してビルドする
  4. ビルドされた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?の後にクエリー文字列をつけています。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?