minify一覧

「JavaScript ファイルの縮小(Minify)」が なぜ難しいか?

JavaScript を縮小・圧縮したい!

PHP の勉強も兼ねて、

「JavaScript ファイルを自動的に縮小(Minify)して、(gzip)圧縮する」

というスクリプトを作っています──と何度も書いて来ましたが、

結論: \(^o^)/ 無理

という、残念な結果に終わりそうです(8 割方 予想が付いていたけど)。

今回は、それがなぜ難しいのか という話と、/packer/ は やっぱり凄い! という話です。

目標

やりたいこと:

  • PHP4 で作る
  • 自動で処理する
  • JavaScript ファイルから
    • コメントを削除
    • 余分な空白・改行を削除

たったこれだけのことですが、じつは ものすごく難しいです。ちなみに、「PHP4」で、というのは、ただ単に ここのサーバで動いているのが PHP4 だから、というだけの理由です。PHP5 だと、類似のスクリプトはいくつかあるのですが……。

「そんなの、2 分でできるよ」というひと向けに、下記の(わざとらしい)"sample.js" をどうぞ。

/***/
/**
*  comment
*  // comment
*/
/*@cc_on
//  http://d.hatena.ne.jp/amachang/20071010/1192012056
var doc = document;          // comment
eval('var document = doc');  // comment
@*/
/*@cc_on document.write('"IE!"\n'); @*/     // comment
var hoge = "/* hoge */\n";
var fuga = '"/* fuga */"\n';
var foo  = "//* foo *//\n";
var bar  = '"\'//* bar *//\'"\n';
document.write(hoge + fuga + foo + bar);

上記のコードを Minify すると、こうなるはずです。──そんなスクリプト、書けますか?

/*@cc_on var doc=document;eval('var document = doc');@*//*@cc_on document.write('"IE!"\n');@*/var hoge="/* hoge */\n";var fuga='"/* fuga */"\n';var foo="//* foo *//\n";var bar='"\'//* bar *//\'"\n';document.write(hoge+fuga+foo+bar);

続きを読む


JavaScript 圧縮ネタの予告(自動でminifing + gzip 圧縮)

JavaScript 圧縮ネタ

旅の恥はかき捨て、と言いますが、ブログは書き捨てしようにもログが残ります。(別に、はてなブックマークのコメント書き捨て話をするわけではない)

書き捨てた、というつもりはなくても、いまだに心残りなのが JavaScript 圧縮ネタ。

このサイトでは考えられないくらいの、アクセス数・はてブ数をたたき出しました(ありがとう!)が──

──内容は他人様の記事のパクリだし、(英語とプログラミングが)あんまりわかってないのが丸出し。Safari などのブラウザの対応具合も、いまだに把握できてない。

この記事に対するツッコミ記事もいくつか目にして、大変勉強になり、感謝しています。しかし、恥ずかしい気持ちのほうが大きいです。もっと便利で面白い記事が書きたい!

時代は「縮小 + 圧縮」!

最近読んだ記事で良かったのが、id:dayflower さんのこの記事。

daily dayflower – JavaScript ファイルの圧縮・再訪

結論は、minifing + mod_deflate だとみんな幸せ、とのこと。

自分の借りている XREA のように mod_deflate が動かせない環境の場合、自分で gzip 圧縮するスクリプトも紹介されています(でもうまく動作しなかった)。

gzip/deflate 圧縮についての記事は多く見ましたが、minifing についてはまだまだ。ましてや、この二つを組み合わせる、というのはあまり見かけません。これからの主流になりそうですね。

──というか、じつは、minifing と gzip 圧縮を自動で行う PHP スクリプトを、四苦八苦しながら作ってます。

続きを読む