PHPからJavaScriptコードを圧縮できるライブラリを使ってみた

PHP内でJavaScriptを直に出力するなら無駄な改行とかスペースはなるべく減らしたいですよね。

そんな時に便利なのが JShrink という、その名の通りJSコードを圧縮できるライブラリ

実際に使ってみたら結構便利だったので、ここではJSrinkの導入手順からJSコード圧縮のやり方まで紹介したいと思います。

このページの目次

JSrinkの導入手順
JShrinkでJSコードを圧縮してみよう
ここまでのまとめ

JSrinkの導入手順

JSrinkは「Minifier.php」という１つのファイルだけからなるライブラリです。このファイルをJSコード圧縮したいPHP内で include または require すればすぐに利用できるようになります。

その導入手順を簡単にまとめると次の通り

まずライブラリを手に入れるために次のgithubページにアクセス

GitHub

tedivm/JShrink

https://github.com/tedivm/JShrink

Javascript Minifier built in PHP . Contribute to tedivm/JShrink development by creating an account on GitHub.

上のページからライブラリをzipでダウンロードしてください。

そうしたら次はそのzipファイルを適当な場所で解凍

解凍したらそのフォルダ内で「JShrink-master」＝＞「src」と移動し、その中の「JShrink」というフォルダをコピーまたは切り取り

あとはこのフォルダをPHPのライブラリディレクトリなどに貼り付ければOKです。ちなみにJShrink内には単体のファイル（Minifier.php）が入っているだけなのでコピー&ペーストですぐ使えます。

JShrinkでJSコードを圧縮してみよう

ではこのライブラリを使ってJSコードを圧縮するコード例を少し紹介。ここではPHPコード内に直書きしたJSコードを圧縮してみたいと思います。

今回JSコード圧縮のために書いたのは次のようなコード

/** JShrinkを読み込み */
require 'JShrink/Minifier.php';

/** 圧縮されるJSコード */
$js = <<<EOM
/// DOMツリー構築後に実行
$( function() {
  /// 適用なメッセージ 
  var   msg   =   '  jshrink test  ';
  /// ボタン押下時の処理 
  $( '#test_btn' ).on( 'click', function() {
    /// メッセージをアラート表示 
    alert( msg );
  } );
} );
EOM;

/** 上のJSコードを圧縮 */
$minified = JShrink\Minifier::minify($js);

/** JShrinkを読み込み */

require 'JShrink/Minifier.php';

/** 圧縮されるJSコード */

$js = <<<EOM

/// DOMツリー構築後に実行

$( function() {

/// 適用なメッセージ

var msg = ' jshrink test ';

/// ボタン押下時の処理

$( '#test_btn' ).on( 'click', function() {

/// メッセージをアラート表示

alert( msg );

} );

EOM;

/** 上のJSコードを圧縮 */

$minified = JShrink\Minifier::minify($js);

何をしているかは上コードのコメントを参照

圧縮を実行するには minify というメソッドにJSコードを渡すだけです。

ただし minify を呼び出す際は \JShrink\Minifier という名前空間を全て書いて呼び出すか
use JShrink\Minifier; のようにuse演算子でインポートしないと使えないことに要注意

そして minify を使って圧縮されたJSコードを実際に出力してみました。

圧縮前と圧縮後のコードの比較は次の通りです。

まず次が圧縮前のJSコード

/// DOMツリー構築後に実行
$( function() {
  /// 適用なメッセージ 
  var   msg   =   '  jshrink test  ';
  /// ボタン押下時の処理 
  $( '#test_btn' ).on( 'click', function() {
    /// メッセージをアラート表示 
    alert( msg );
  } );
} );

/// DOMツリー構築後に実行

$( function() {

/// 適用なメッセージ

var msg = ' jshrink test ';

/// ボタン押下時の処理

$( '#test_btn' ).on( 'click', function() {

/// メッセージをアラート表示

alert( msg );

} );

敢えて余計なコメントを多くしたり、必要のないスペースを多く書いています。

そして次がJShrinkで圧縮後のJSコード

$(function(){var msg=' jshrink test ';$('#test_btn').on('click',function(){alert(msg);});});

1	$(function(){var msg=' jshrink test ';$('#test_btn').on('click',function(){alert(msg);});});

１行にまとまってかなり見やすくなりました。不必要な２つ以上の空白とか余計なコメントが全て消されているのが分かるはずです。

ちなみに文字列の場合は ' jshrink test ' みたいに空白はしっかりと残ってくれます。だからメッセージが意図せずバグってしまう心配もありません。

以上がJSrinkでのJSコード圧縮のやり方

PHPを使ってるとJSコード直書きすることがよくあるのでSHrinkはかなり重宝しそうです。あと minify という関数を呼び出すだけというシンプルさもいいですね。

ここまでのまとめ

JSrinkはJSコードを直接出力する場合はかなり役立つと思います。空白とかコメントはページ読み込みを遅くするだけので、読み込み速度を少しでも早めるのに効果があるかもしれません。

ということでJS圧縮用ライブラリ JSrink についてでした。

PHPからJavaScriptコードを圧縮できるライブラリを使ってみた

JSrinkの導入手順

JShrinkでJSコードを圧縮してみよう

ここまでのまとめ

関連記事

プロフィール

人気記事

検索してみる