Node.js でサクッと圧縮! JavaScript 圧縮ライブラリ『UglifyJS』の使い方

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

最近, JavaScript で開発!!って機会増えてませんか?

一昔前まではセキュリティがあまいわ速度も遅い, その上それぞれのブラウザによる独自実装のせいで うんち言語扱いされていた JavaScript.

ですが昨今, HTML5 の普及, 仕様の統一化, ブラウザ戦争の勃発による JavaScript 実行エンジンの高速化で 十分実用できる言語として普及しつつあります.

そんな JavaScript で開発する際に必要になるのがコードの圧縮化です. いくら高速化したといってもスクリプト言語である以上, script ファイルのサイズは, サーバーからの転送速度, コードのパース速度がダイレクトにユーザーの待ち時間に影響します.

今回は JavaScript のコードをサクッと圧縮する方法について解説していきます. 圧縮には NodeJS 上で動く JavaScript 圧縮ライブラリ『UglifyJS』を使用します.

tmlib.js でもバリバリ使わせてもらっているオススメのライブラリです.

screenshot

Table of contents

UglifyJSとは

UglifyJS とは, node.js 用に作られたライブラリです. これを使うことで JavaScript のコードをパース, 圧縮, 整形することができます.

GitHub でプロジェクト管理されています.

今回は圧縮する方法について解説しますが, コードを整形したり定数を置換したりと様々な機能があります.

興味のある方は下記のページを覗いてみて下さい(英語) 

GitHub

up

UglifyJS をインストールしよう

UglifyJS は npm 経由で簡単にインストールできます. 下記のコマンドを実行してください.

$ npm install uglify-js

これでインストール完了です.

また, コマンドも提供されているみたいなのでパスを通すか g オプションをつけてインストールすれば, uglifyjs コマンドで圧縮することもできるみたいです.

up

ファイルを圧縮しよう

まず適当に js ファイルを作成します. 今回は build.js とします.

そして圧縮したいファイル(ここでは hoge.js とします)を 同じ階層に置きます.

そして下記のコードを build.js に記述します.

var fs      = require("fs");
var uglify  = require("uglify-js");

var inFile = fs.readFileSync("hoge.js");
var outputFile = fs.createWriteStream("hoge.min.js");

// パース
var ast = uglify.parser.parse( inFile.toString() );
ast = uglify.uglify.ast_mangle(ast);
ast = uglify.uglify.ast_squeeze(ast);
var finalCode = uglify.uglify.gen_code(ast);

// 出力
outputFile.write(finalCode);

上記のコードを入力し終えたら下記のコマンドを実行します.

$ node build.js

すると hoge.js を圧縮したファイル hoge.min.js が出力されます.

処理の流れは下記のようになります.

  • 入力用ファイル(hoge.js) を読み込む
  • 出力用ファイル(hoge.min.js) を作成
  • hoge.js の文字列を uglify のパーサーに渡してパースし, ast を作ります
  • ast の名前を潰して圧縮します
  • ast から圧縮後のコードを出力します.
  • 最後に出力用ファイルに書き込む

up

Reference

参考にさせて頂いたサイトです.

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT