JavaScript: How to build and deploy

1万行を超える比較的長大な JavaScript コードを deploy する際、どのような点に気をつけておくべきか、当たり前なこともあるけど、包括的にまとめている資料が見当たらないので、自分でまとめておく。

ファイルの統合

長大な JavaScript を書く際、機能別にファイルを分けることは、他の言語同様、有効な管理方法のひとつであるが、production 環境において同じファイル構成をとっていると、それが通信上のボトルネックになることがある。理由は、ページローディングの際に、大量の Request/Responce が発生するため。自分で計ったわけではないが、同じコード量でも、複数ファイルに分かれているよりも、単一のファイルにまとまっていたほうが、一回の Request/Responce で済み、処理が早いという。なので複数ファイルで構成される JavaScript の deploy にあたっては、事前にファイルの統合を行うことが望ましい。

コードの圧縮化・難読化

比較的長大な JavaScript コードは、圧縮化・難読化を行うことがよいとされている。圧縮化とは、コードの改行・インデント・コメント・余分なスペースをカットして、その名のとおりファイルサイズを圧縮することを指す。難読化とは、ファイル圧縮に加え、変数名の省略化(例えば A、B、C… といった文字に置換される)を行うことで、処理内容を読みづらくすることを指す。ツールを探すと、いくつか候補があるようで、すべて検証できたわけではないが、何点か掲載しておく。

検証済み

未検証

Build

JavaScript は interpreter 言語であり、当然 compiler は通常存在しないが、比較的長大な JavaScript コードを扱う際には、Linux/FreeBSD といった環境上で GNU make を使った build 環境を用意しておくと便利といわれている。理由は、上記に挙げた「ファイルの統合」「コードの圧縮化・難読化」を自動化させるため。ファイル修正のたびに手作業で行うのは、可能であるにしても、あまり効率的とはいえず、C/C++ や Java などと同様、Makefile というかたちで、必要な処理をまとめて自動化するほうが効率的で間違いがないとされている。

jsbuild.png

Build 環境の作り方

Debian GNU/Linux を前提に記すが、他の Linux あるいは FreeBSD ならば大差はないと思われる。圧縮化ツールには、jsmin (written by C) を使用した。

開発ツールとライブラリヘッダをインストール

# apt-get install gcc g++ make libc6-dev

開発者のサイトからソースコードをダウンロードする。(2007/05/13現在の最新版は、2007/03/27であり、比較的こまめに更新されていると思われる)

# wget http://www.crockford.com/javascript/jsmin.c

コンパイル

# gcc -o /usr/local/bin/jsmin jsmin.c

Makefile の作成

# vim Makefile

以下記述例

SRC = is1.js is2.js
COMP = is.compressed.js
COMB = /tmp/tmp.js
COMMENT = "Copyright (c) 2007 Yuki SHIMAZU. All rights reserved."
all: $(COMP)
$(COMB): $(SRC)
	cat $(SRC) > $(COMB)
$(COMP): $(COMB)
	jsmin < $(COMB) > $(COMP) $(COMMENT)

以下コマンドにて、必要な処理(ファイル統合・コード圧縮化・コード難読化)が行われたファイル(is.compressed.js)が生成される。

# make

以上でファイル生成が完了。このファイルを deploy することで、通信上の効率性を改善できると思われる。

参考ページ

Leave a Reply