google-closure-compilerとは
google-closure-compilerはJavaScript のダウンロードと実行を高速化するためのツールです。
このライブラリは、JavaScript を解析して分析し、不要なコードを削除して書き換え、残りの部分を最小限に抑えます。
google-closure-compilerの使い方
以前はClosure Compiler のオンラインサービスがあったのですが、2025年1月13日に終了しました。
Closure Compiler Webservice Turndown - 2025 #4199
そのため、Closure Compilerを利用するにはJava版かnpm版を使用する必要があります。
この記事では使用者が多いnpm版の使い方について解説します。
まず、プロジェクトにgoogle-closure-compilerをインストールします。
npm i -D google-closure-compiler次に以下のようにnpxを使ってコンパイルします。
npx google-closure-compiler --js index.js --js_output_file index.min.js例えば以下のようなindex.jsをコンパイルすると…
(() => {
function add(a, b) {
return a + b
}
console.log(add(1, 2))
})()以下のようにコンパイルされます。
前述の処理の結果は必ず「3」になるため、console.log(3) となります。
(()=>{console.log(3)})();もし、以下のように結果がランダムの関数の場合は…
(() => {
function dice() {
return Math.floor(Math.random() * 6) + 1
}
console.log(dice())
})()以下のようにfunctionがない以下のコードになります。
(()=>{console.log(Math.floor(6*Math.random())+1)})();ちなみに複数のjsファイルを1つにまとめたい場合は、--js に *.js を指定します。
npx google-closure-compiler --js *.js --js_output_file bundle.js3つの最適化レベル
google-closure-compilerでは「--compilation_level=」で3つの最適化レベルが指定できます。
指定しない場合は「SIMPLE」で最適化されます。
| レベル | 最適化内容 |
|---|---|
| WHITESPACE_ONLY | コメント・空白除去のみ |
| SIMPLE | 安全な範囲での最適化 |
| ADVANCED | 高度な最適化（副作用あり） |
前述のindex.jsをそれぞれの最適化レベルでコンパイルすると、以下の結果になります。
WHITESPACE_ONLYの場合
npx google-closure-compiler --js index.js --js_output_file index.min.js --compilation_level=WHITESPACE_ONLY(()=>{function add(a,b){return a+b}console.log(add(1,2))})();SIMPLEの場合
npx google-closure-compiler --js index.js --js_output_file index.min.js --compilation_level=SIMPLE(()=>{console.log(3)})();ADVANCEDの場合
npx google-closure-compiler --js index.js --js_output_file index.min.js --compilation_level=ADVANCEDconsole.log(3);3つ目のADVANCEDだと3つの中で一番コード量が少なくなりますが、即時実行関数を消してしまっており、副作用が大きく、コンパイル後にコードが動作しなくなることがあるため、使用はオススメしません。
Node.js API から使う方法
Node.js からプログラム的に呼び出すこともできます。
const closureCompiler = require('google-closure-compiler').compiler
const compiler = new closureCompiler({
js: 'src/index.js',
js_output_file: 'dist/bundle.js',
compilation_level: 'SIMPLE'
})
compiler.run((exitCode, stdOut, stdErr) => {
if (exitCode === 0) {
console.log('Success:', stdOut)
} else {
console.error('Error:', stdErr)
}
})古い環境でJavaScriptのコンパイルによる圧縮がいまいちなときは、こちらのコードによる圧縮の処理を追加すると良いでしょう。
