スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Prev.    Category    Next 

JavaScript の軽量化(難読化)ツール

前回 、 JavaScript に変換して使う言語を紹介しました。 どうせならもう一手間かけて、リリースする際は軽量化(難読化)もしておきましょう。
という事で、今回は軽量化ツールの紹介です。

軽量化や難読化とは、英語で言うと minify や compress と呼ばれているもので、 コメント、空白、改行などを取り除くことです。 これをやっておくとファイルのロードが多少速くなります。

かしこいものになってくるとコードをより短い表現に変換したり、 使っていないコードを削除してくれたりもします。
コードの改変までやるのは不安を感じる人もいるかもしれませんが、 たいていのツールはオプションで指定しないかぎり、かってにそこまでやることはありません。
  new Array(1, 2, 3, 4)  => [1,2,3,4]  
なお、前回紹介した言語の中では、 Dart はオプションによって、 軽量化した状態のコードを生成することができます。
紹介する軽量化ツールはバッチ処理などをしやすいコマンドラインのものです。
ツール プラットホーム 必要なもの
UglifyJS クロスプラットホーム Node.js
Microsoft Ajax Minifier Windows  
JSC Windows  
Google Closure Compiler クロスプラットホーム Java
お勧めは次のような感じです。
Minifier select

公開されている JavaScript ファイルを見たい場合などに 軽量化(難読化)を戻したい時があります。 この軽量化の逆は beautify や decompress と呼ばれています。
上記のツールの中では UglifyJS はこれが可能です。
しかし、そんなに行う処理でもないため、オンライン版で十分だと思います。

UglifyJS

JavaScript の解析、軽量化、整形ツールです。 Node.js がインストール済みであれば、一番簡単にインストールできます。

インストール

Node.js がインストールされていない場合は、まず Node.js をインストールします。 インストール方法は CoffeeScript または TypeScript の記事を見てください。

以下のコマンドを実行すると、ネットワークから取得してインストールしてくれます。
 > npm install -g uglify-js

使い方

軽量化する場合には次のようなコマンドを実行します。
uglifyjs [オプション] 入力ファイル
 > uglifyjs -o hello_c.js hello.js 
デフォルトでは軽量化後のソースは標準出力に出ます。 出力ファイルを指定するためには -o オプションを使用します。
オプションは必ず入力ファイルの前に記述して下さい。 後ろに書いたものは認識してくれません。

その他のよく使いそうなオプションをあげておきます。
オプション 説明
-b, --beautify 整形(軽量化の逆)
-o, --output <file> 出力ファイルの指定
--overwrite 軽量化後のコードで入力ファイルを上書きします
--unsafe コードをより短い表現に変換

使用法の詳細は以下のページを参照して下さい。 -h などでヘルプを表示することはできません。

Microsoft Ajax Minifier

Microsoft 製の軽量化ツールです。

インストール

Microsoft のサイトからインストーラー(AjaxMinSetup.msi)をダウンロードし、 実行します。 以下のフォルダーにインストールされます。
 c:\Program Files\Microsoft\Microsoft Ajax Minifier 
環境変数 Path に追加するか、 スタートメニューに追加された [ Microsoft Ajax Minifier ]→[ Microsoft Ajax Minifier Command Prompt ] の項目から使用します。

使い方

軽量化する場合には次のようなコマンドを実行します。
ajaxmin [オプション] 入力ファイル
 > ajaxmin hello.js -o hello_c.js 
デフォルトでは軽量化後のソースは標準出力に出ます。 出力ファイルを指定するためには -o オプションを使用します。

短くするためのコードの改変まで行う場合は -hc オプションもつけます。
 > ajaxmin -hc hello.js -o hello_c.js 

その他のオプションは次の方法でみることができます。
  • -? オプション
  • スタートメニュー
    [ Microsoft Ajax Minifier ]→[ Microsoft Ajax Minifier Documentation ]
また、以下のサイトに詳細な説明があります。

JSC (JavaScript Compressor)

exe ファイル一つで動作するので、一番お手軽です。 ただし、 コードの改変までは行なってくれないようです。

インストール

以下のサイトから zip ファイル(JSC-X.X.zip)をダウンロードします。 zip ファイル内の JSC.exe ファイルを Path の通ったフォルダーに置きます。

ここで一つ注意点があります。
.NET のコマンドラインツールに同名のプログラム jsc.exe(JScript Compiler) が存在します。 紛らわしいので、 jsm.exe などの別名にしておいた方が良いでしょう。

使い方

軽量化する場合には次のようなコマンドを実行します。
jsc 入力ファイル [出力ファイル]
 > jsc hello.js hello_c.js 
出力ファイルを省略した場合は jsc-compressed-MM-DD-YYYY.js の名前で生成されます。
入力ファイルも省略するとバージョン情報や使用法が表示されます。
コマンドオプションはありません。

Google Closure Compiler

Google 製の軽量化ツールです。

インストール

Java を使用するため、入ってない場合は以下のサイトからインストールしてください。

以下のサイトから zip ファイル(compiler-latest.zip)をダウンロードします。 zip ファイル内の compiler.jar ファイルを好きなディレクトリーにおいて下さい。

使い方

軽量化する場合には次のようなコマンドを実行します。
java -jar "compiler.jarのパス" --js 入力ファイル --js_output_file 出力ファイル
 $ java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js 
オプションを指定しない場合は、入力が標準入力、出力が標準出力です。

--js オプションを複数書くことによって、結合して軽量化したファイルを生成することができます。
 $ java -jar compiler.jar --js util.js --js hello.js --js_output_file hello-compiled.js 

コードの改変まで行う場合は、 --compilation_level ADVANCED_OPTIMIZATIONS オプションをつけます。
 $ java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js hello.js --js_output_file hello-compiled.js 
使用法の詳細は以下のサイトを見て下さい。
追記
最初、用語には一番よく使われているかなと思い、難読化を使っていました。 しかし、 軽量化 も結構使われているようなので、軽量化に変更しました。
コードを読みづらくすることが目的ではなく、 短くした結果読みづらくなるだけなので、呼び方としては軽量化の方が個人的にはいいんじゃないかと思います。

圧縮 という言葉も使われますが、こちらは zip のような圧縮をまず連想します。 しかもサーバー側の設定によっては、 gzip で圧縮した html や JavaScript などのファイル (html.gz, js.gz) を通常のファイルのように使うこともできます。
そのため、 圧縮はちょっと紛らわしいでしょう。

ちなみに英語では、なんとなくですが minify が最近の主流っぽいです。
関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
9位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
3位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

08月 | 2017年09月 | 10月
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。